Spaces:
Runtime error
Runtime error
| /* ---------- Landing: feature tour ---------- */ | |
| .showcase { | |
| display: grid; | |
| gap: clamp(64px, 12vh, 140px); | |
| margin-top: 24px; | |
| } | |
| .showcase-row { | |
| display: grid; | |
| gap: 28px; | |
| align-items: center; | |
| } | |
| @media (min-width: 900px) { | |
| .showcase-row { | |
| grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); | |
| gap: 56px; | |
| } | |
| .showcase-row.flip .showcase-copy { | |
| order: 2; | |
| } | |
| } | |
| .showcase-copy { | |
| display: grid; | |
| gap: 14px; | |
| align-content: start; | |
| justify-items: start; | |
| } | |
| .showcase-copy h3 { | |
| font-size: clamp(1.5rem, 3vw, 2.1rem); | |
| line-height: 1.12; | |
| } | |
| .showcase-copy ul { | |
| margin: 4px 0 0; | |
| padding: 0; | |
| list-style: none; | |
| display: grid; | |
| gap: 8px; | |
| } | |
| .showcase-copy li { | |
| position: relative; | |
| padding-left: 22px; | |
| color: var(--text-2); | |
| } | |
| .showcase-copy li::before { | |
| content: ""; | |
| position: absolute; | |
| left: 2px; | |
| top: 0.55em; | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: var(--blue); | |
| box-shadow: 0 0 10px var(--blue); | |
| } | |
| .showcase-n { | |
| color: var(--white); | |
| opacity: 0.6; | |
| margin-right: 6px; | |
| } | |
| .showcase-visual { | |
| padding: 0; | |
| overflow: hidden; | |
| border-color: var(--blue-20); | |
| box-shadow: var(--glow-lg); | |
| aspect-ratio: 16 / 11; | |
| background: radial-gradient(70% 60% at 50% 40%, var(--blue-10), transparent 70%), rgba(0, 0, 0, 0.6); | |
| } | |
| /* Visual primitives. Everything starts hidden and plays once the row is .arrived. */ | |
| .fx { | |
| height: 100%; | |
| padding: clamp(16px, 3vw, 28px); | |
| display: grid; | |
| gap: 12px; | |
| align-content: center; | |
| font-size: 0.9rem; | |
| } | |
| .fx .mono { | |
| font-size: 0.72rem; | |
| color: var(--blue); | |
| } | |
| .fx > *, | |
| .fx-card, | |
| .fx-node, | |
| .fx-edge, | |
| .fx-cal span { | |
| transition: | |
| opacity 0.8s ease, | |
| transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), | |
| stroke-dashoffset 1.2s ease, | |
| background 0.6s ease, | |
| border-color 0.6s ease, | |
| box-shadow 0.6s ease; | |
| } | |
| .showcase-row:not(.arrived) .fx > * { | |
| opacity: 0; | |
| transform: translateY(14px); | |
| } | |
| .fx > *:nth-child(2) { | |
| transition-delay: 0.35s; | |
| } | |
| .fx > *:nth-child(3) { | |
| transition-delay: 0.7s; | |
| } | |
| .fx > *:nth-child(4) { | |
| transition-delay: 1.05s; | |
| } | |
| .fx > *:nth-child(5) { | |
| transition-delay: 1.3s; | |
| } | |
| /* Chat */ | |
| .fx-bubble { | |
| justify-self: end; | |
| padding: 8px 14px; | |
| border-radius: 14px 14px 4px 14px; | |
| background: var(--blue-10); | |
| border: 1px solid var(--blue-35); | |
| } | |
| .fx-steps { | |
| display: grid; | |
| gap: 2px; | |
| } | |
| .fx-answer { | |
| line-height: 1.6; | |
| } | |
| .fx-cite { | |
| display: inline-grid; | |
| place-items: center; | |
| min-width: 16px; | |
| height: 16px; | |
| margin-left: 3px; | |
| border-radius: 5px; | |
| font: 600 0.6rem var(--font-mono); | |
| vertical-align: super; | |
| background: var(--blue); | |
| box-shadow: 0 0 10px var(--blue); | |
| } | |
| .fx-source { | |
| display: grid; | |
| gap: 6px; | |
| padding: 10px 12px; | |
| border-radius: 10px; | |
| border: 1px solid var(--line); | |
| } | |
| .fx-line { | |
| padding: 4px 8px; | |
| border-radius: 6px; | |
| background: var(--blue-20); | |
| box-shadow: inset 3px 0 0 var(--blue); | |
| } | |
| /* Topic map */ | |
| .fx-map { | |
| padding: 8px; | |
| } | |
| .fx-map svg { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .fx-edge { | |
| stroke: var(--white); | |
| stroke-opacity: 0.3; | |
| stroke-width: 0.4; | |
| stroke-dasharray: 150; | |
| stroke-dashoffset: 150; | |
| transition-delay: var(--d); | |
| } | |
| .fx-halo { | |
| fill: var(--blue); | |
| opacity: 0.35; | |
| filter: blur(2px); | |
| } | |
| .fx-node text { | |
| fill: var(--white); | |
| font: 500 3.6px var(--font-body); | |
| } | |
| .fx-node { | |
| opacity: 0; | |
| transition-delay: var(--d); | |
| } | |
| .showcase-row.arrived .fx-edge { | |
| stroke-dashoffset: 0; | |
| } | |
| .showcase-row.arrived .fx-node { | |
| opacity: 1; | |
| } | |
| .showcase-row.arrived .fx-halo { | |
| animation: pulse-halo 4s ease-in-out infinite; | |
| animation-delay: var(--t, 0s); | |
| } | |
| /* Depth: the camera dives into Gravity, the other topics fall back, its sub-topics and posts light up, | |
| then it pulls back out. One 14 s loop, started once the row has arrived. */ | |
| .fx-cam { | |
| transform-origin: 38px 52px; | |
| transform-box: view-box; | |
| } | |
| .fx-deep, | |
| .fx-panel, | |
| .fx-crumb-deep { | |
| opacity: 0; | |
| } | |
| .showcase-row.arrived .fx-cam { | |
| animation: fx-dive 14s ease-in-out 2.5s infinite; | |
| } | |
| .showcase-row.arrived .fx-dim { | |
| animation: fx-dim 14s ease-in-out 2.5s infinite; | |
| } | |
| .showcase-row.arrived .fx-deep, | |
| .showcase-row.arrived .fx-panel, | |
| .showcase-row.arrived .fx-crumb-deep { | |
| animation: fx-in 14s ease-in-out 2.5s infinite; | |
| } | |
| @keyframes fx-dive { | |
| 0%, | |
| 26%, | |
| 86%, | |
| 100% { | |
| transform: none; | |
| } | |
| 40%, | |
| 72% { | |
| transform: translate(-4px, -2px) scale(2.1); | |
| } | |
| } | |
| @keyframes fx-dim { | |
| 0%, | |
| 26%, | |
| 86%, | |
| 100% { | |
| opacity: 1; | |
| } | |
| 40%, | |
| 72% { | |
| opacity: 0.1; | |
| } | |
| } | |
| @keyframes fx-in { | |
| 0%, | |
| 32%, | |
| 80%, | |
| 100% { | |
| opacity: 0; | |
| } | |
| 42%, | |
| 70% { | |
| opacity: 1; | |
| } | |
| } | |
| .fx-sat { | |
| fill: var(--white); | |
| opacity: 0.5; | |
| } | |
| .fx-ring { | |
| fill: none; | |
| stroke: var(--blue); | |
| stroke-opacity: 0.5; | |
| stroke-width: 0.25; | |
| stroke-dasharray: 1.2 1.6; | |
| } | |
| .fx-deep-edge { | |
| stroke: var(--white); | |
| stroke-opacity: 0.35; | |
| stroke-width: 0.2; | |
| } | |
| .fx-post { | |
| fill: var(--white); | |
| } | |
| .fx-sub { | |
| fill: var(--white); | |
| font: 500 2.4px var(--font-body); | |
| } | |
| .fx-panel rect { | |
| fill: rgba(0, 0, 0, 0.88); | |
| stroke: var(--blue); | |
| stroke-opacity: 0.5; | |
| stroke-width: 0.25; | |
| } | |
| .fx-panel text { | |
| fill: var(--white); | |
| } | |
| .fx-panel-h { | |
| font: 600 3.8px var(--font-display); | |
| } | |
| .fx-panel-k { | |
| fill: var(--blue) ; | |
| font: 500 1.9px var(--font-mono); | |
| letter-spacing: 0.2px; | |
| } | |
| .fx-panel-t { | |
| font: 500 2.7px var(--font-body); | |
| } | |
| .fx-crumb { | |
| display: flex; | |
| min-height: 1.2em; | |
| } | |
| .fx-pulse { | |
| opacity: 0; | |
| filter: drop-shadow(0 0 1.5px var(--blue)); | |
| transition: opacity 1s ease 1.5s; | |
| } | |
| .showcase-row.arrived .fx-pulse { | |
| opacity: 0.9; | |
| } | |
| @keyframes pulse-halo { | |
| 50% { | |
| opacity: 0.6; | |
| } | |
| } | |
| /* Audio */ | |
| .fx-wave { | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| height: 110px; | |
| } | |
| .fx-wave span { | |
| flex: 1; | |
| height: 12%; | |
| border-radius: 99px; | |
| background: var(--blue); | |
| box-shadow: 0 0 8px var(--blue-60); | |
| } | |
| .fx-wave span:nth-child(2n) { | |
| background: var(--white); | |
| } | |
| .showcase-row.arrived .fx-wave span { | |
| animation: bar 1.4s ease-in-out infinite alternate; | |
| animation-delay: var(--d); | |
| } | |
| @keyframes bar { | |
| from { | |
| height: 12%; | |
| } | |
| to { | |
| height: var(--h); | |
| } | |
| } | |
| .fx-lines { | |
| display: grid; | |
| gap: 8px; | |
| } | |
| .fx-lines p { | |
| display: flex; | |
| gap: 10px; | |
| align-items: center; | |
| } | |
| .fx-host { | |
| display: inline-grid; | |
| place-items: center; | |
| flex: none; | |
| width: 22px; | |
| height: 22px; | |
| border-radius: 50%; | |
| font: 600 0.65rem var(--font-mono); | |
| } | |
| .fx-host.a { | |
| background: var(--blue); | |
| } | |
| .fx-host.b { | |
| background: var(--white); | |
| color: var(--black); | |
| } | |
| /* Video */ | |
| .fx-video { | |
| grid-template-columns: 0.8fr 1.3fr; | |
| align-items: center; | |
| } | |
| .fx-scenes { | |
| display: grid; | |
| gap: 8px; | |
| } | |
| .fx-scenes span { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 9px 12px; | |
| border-radius: 10px; | |
| border: 1px solid var(--line-strong); | |
| font-size: 0.8rem; | |
| } | |
| .fx-scenes span.on { | |
| border-color: var(--blue); | |
| background: var(--blue-10); | |
| box-shadow: 0 0 18px var(--blue-20); | |
| } | |
| .fx-frame { | |
| display: grid; | |
| gap: 6px; | |
| align-content: end; | |
| padding: 10px; | |
| border-radius: 10px; | |
| border: 1px solid var(--blue-35); | |
| background: radial-gradient(80% 60% at 50% 100%, var(--blue-20), transparent), var(--black); | |
| box-shadow: 0 0 20px var(--blue-10); | |
| font-size: 0.75rem; | |
| } | |
| .fx-frame b { | |
| font-family: var(--font-display); | |
| line-height: 1.2; | |
| } | |
| .v169 { | |
| aspect-ratio: 16 / 9; | |
| } | |
| .fx-render { | |
| grid-column: 1 / -1; | |
| display: grid; | |
| gap: 6px; | |
| } | |
| .fx-render i { | |
| display: block; | |
| height: 4px; | |
| border-radius: 99px; | |
| background: linear-gradient(90deg, var(--blue) 70%, var(--surface-2) 70%); | |
| } | |
| /* Mind Constellation shapes */ | |
| .fx-pills { | |
| display: flex; | |
| gap: 6px; | |
| } | |
| .fx-pills button { | |
| padding: 3px 10px; | |
| border-radius: 99px; | |
| border: 1px solid var(--line-strong); | |
| background: transparent; | |
| color: var(--text-2); | |
| font: inherit; | |
| cursor: pointer; | |
| transition: | |
| border-color 0.3s ease, | |
| background 0.3s ease, | |
| color 0.3s ease; | |
| } | |
| .fx-pills button:hover { | |
| color: var(--white); | |
| } | |
| .fx-pills button.on { | |
| border-color: var(--blue); | |
| background: var(--blue-10); | |
| color: var(--white); | |
| } | |
| /* Launch Kit */ | |
| .fx-kit { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .fx-card { | |
| display: grid; | |
| gap: 6px; | |
| padding: 12px; | |
| border-radius: 12px; | |
| border: 1px solid var(--line-strong); | |
| background: rgba(0, 0, 0, 0.7); | |
| transition-delay: var(--d); | |
| } | |
| .fx-card p { | |
| font-size: 0.82rem; | |
| line-height: 1.45; | |
| } | |
| .showcase-row:not(.arrived) .fx-kit .fx-card { | |
| opacity: 0; | |
| transform: translateY(40px) rotate(var(--r)); | |
| } | |
| /* Voice */ | |
| .fx-profile { | |
| display: grid; | |
| gap: 4px; | |
| padding: 12px; | |
| border-radius: 12px; | |
| border: 1px solid var(--blue-35); | |
| background: var(--blue-05); | |
| } | |
| .fx-slider { | |
| display: grid; | |
| grid-template-columns: 90px 1fr; | |
| align-items: center; | |
| gap: 10px; | |
| font-size: 0.8rem; | |
| color: var(--text-2); | |
| } | |
| .fx-slider i { | |
| position: relative; | |
| height: 4px; | |
| border-radius: 99px; | |
| background: var(--surface-2); | |
| } | |
| .fx-slider i::after { | |
| content: ""; | |
| position: absolute; | |
| left: 0; | |
| top: -3px; | |
| width: 10px; | |
| height: 10px; | |
| margin-left: -5px; | |
| border-radius: 50%; | |
| background: var(--white); | |
| box-shadow: 0 0 10px var(--blue); | |
| transition: left 1.2s cubic-bezier(0.22, 1, 0.36, 1); | |
| transition-delay: var(--d); | |
| } | |
| .showcase-row.arrived .fx-slider i::after { | |
| left: var(--v); | |
| } | |
| .fx-clone { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .fx-rec { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: var(--white); | |
| box-shadow: 0 0 8px var(--white); | |
| animation: pill-pulse 1.4s ease-in-out infinite; | |
| } | |
| /* Launchpad */ | |
| .fx-cal { | |
| display: grid; | |
| grid-template-columns: repeat(7, 1fr); | |
| gap: 5px; | |
| } | |
| .fx-cal span { | |
| aspect-ratio: 1.3; | |
| padding: 3px 5px; | |
| border-radius: 6px; | |
| border: 1px solid var(--line); | |
| font: 0.6rem var(--font-mono); | |
| color: var(--text-3); | |
| } | |
| .fx-cal span.on { | |
| transition-delay: var(--d); | |
| } | |
| .showcase-row.arrived .fx-cal span.on { | |
| border-color: var(--blue); | |
| background: var(--blue-20); | |
| box-shadow: 0 0 12px var(--blue-35); | |
| color: var(--white); | |
| } | |
| .fx-launch { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 6px; | |
| } | |
| .fx-launch span { | |
| padding: 4px 10px; | |
| border-radius: 99px; | |
| border: 1px solid var(--blue-35); | |
| color: var(--white); | |
| font-size: 0.72rem; | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .showcase-row .fx > *, | |
| .showcase-row .fx-node, | |
| .showcase-row .fx-card { | |
| opacity: 1 ; | |
| transform: none ; | |
| } | |
| .fx-edge { | |
| stroke-dashoffset: 0; | |
| } | |
| .fx-wave span, | |
| .fx-halo, | |
| .fx-cam, | |
| .fx-dim, | |
| .fx-deep, | |
| .fx-panel, | |
| .fx-crumb-deep, | |
| .fx-rec { | |
| animation: none ; | |
| } | |
| .fx-pulse { | |
| display: none; | |
| } | |
| } | |
| /* Demo video sound controls */ | |
| .demo-bar { | |
| align-items: center; | |
| } | |
| .demo-sound { | |
| border: 1px solid var(--blue-35); | |
| border-radius: 999px; | |
| padding: 3px 12px; | |
| background: transparent; | |
| color: var(--white); | |
| font: inherit; | |
| cursor: pointer; | |
| } | |
| .demo-sound:hover { | |
| border-color: var(--blue); | |
| box-shadow: var(--glow-sm); | |
| } | |
| .demo-stage { | |
| position: relative; | |
| } | |
| .demo-unmute { | |
| position: absolute; | |
| right: 16px; | |
| bottom: 16px; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 10px 16px; | |
| border-radius: 999px; | |
| border: 1px solid var(--blue-60); | |
| background: rgba(0, 0, 0, 0.72); | |
| backdrop-filter: blur(6px); | |
| color: var(--white); | |
| font: 600 0.875rem var(--font-body); | |
| cursor: pointer; | |
| box-shadow: var(--glow-md); | |
| } | |
| .demo-unmute:hover { | |
| background: var(--blue); | |
| } | |
| /* Pricing: billing cycle toggle */ | |
| .pricing-top { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 12px; | |
| margin-bottom: 20px; | |
| } | |
| .pricing-top .pricing-note { | |
| margin: 0; | |
| } | |
| .cycle-toggle { | |
| display: inline-flex; | |
| padding: 4px; | |
| border: 1px solid var(--line-strong); | |
| border-radius: 999px; | |
| background: rgba(0, 0, 0, 0.6); | |
| } | |
| .cycle-toggle button { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 7px 16px; | |
| border: none; | |
| border-radius: 999px; | |
| background: transparent; | |
| color: var(--text-2); | |
| font: 600 0.875rem var(--font-body); | |
| cursor: pointer; | |
| } | |
| .cycle-toggle button.on { | |
| background: var(--blue); | |
| color: var(--white); | |
| box-shadow: var(--glow-sm); | |
| } | |
| .cycle-toggle .save { | |
| padding: 1px 8px; | |
| border-radius: 999px; | |
| border: 1px solid var(--blue-60); | |
| font-size: 0.65rem; | |
| color: var(--white); | |
| } | |
| .cycle-toggle button.on .save { | |
| border-color: rgba(255, 255, 255, 0.6); | |
| } | |
| .tier-was { | |
| margin-right: 8px; | |
| font-size: 1.1rem; | |
| text-decoration: line-through; | |
| text-decoration-color: var(--blue); | |
| } | |
| .tier-billing { | |
| font-size: 0.72rem; | |
| margin-top: -4px; | |
| } | |
| /* ---------- Topic map: space chart ---------- */ | |
| .map-canvas { | |
| background: | |
| radial-gradient(60% 50% at 50% 45%, rgba(33, 124, 255, 0.07), transparent 70%), | |
| #000; | |
| } | |
| .survey-ring { | |
| fill: none; | |
| stroke: rgba(255, 255, 255, 0.05); | |
| stroke-dasharray: 2 6; | |
| } | |
| .survey-axis { | |
| stroke: rgba(255, 255, 255, 0.04); | |
| } | |
| .nebula { | |
| cursor: grab; | |
| } | |
| .map-svg.dragging, | |
| .map-svg.dragging .nebula, | |
| .map-svg.dragging .map-node { | |
| cursor: grabbing; | |
| } | |
| .galaxy-core { | |
| pointer-events: none; | |
| transform-box: fill-box; | |
| transform-origin: center; | |
| animation: core-breathe 6s ease-in-out infinite; | |
| } | |
| .galaxy-heart { | |
| pointer-events: none; | |
| filter: drop-shadow(0 0 4px #ffffff) drop-shadow(0 0 10px #217cff); | |
| } | |
| @keyframes core-breathe { | |
| 50% { | |
| opacity: 0.75; | |
| transform: scale(0.94); | |
| } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .galaxy-core { | |
| animation: none; | |
| } | |
| } | |
| .galaxy-label { | |
| fill: rgba(156, 196, 255, 0.75); | |
| font-family: var(--font-mono); | |
| pointer-events: none; | |
| } | |
| .constellation { | |
| transition: stroke-opacity 0.25s ease; | |
| } | |
| .map-count { | |
| fill: var(--blue); | |
| font-family: var(--font-mono); | |
| } | |
| .orbit-ring { | |
| fill: none; | |
| stroke: var(--blue); | |
| stroke-dasharray: 4 5; | |
| transform-box: fill-box; | |
| transform-origin: center; | |
| animation: orbit-spin 12s linear infinite; | |
| } | |
| @keyframes orbit-spin { | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| .spikes { | |
| pointer-events: none; | |
| } | |
| .map-hud { | |
| position: absolute; | |
| left: 14px; | |
| top: 12px; | |
| z-index: 1; | |
| display: grid; | |
| gap: 4px; | |
| max-width: min(360px, 60%); | |
| padding: 10px 12px; | |
| border: 1px solid var(--blue-20); | |
| border-radius: 10px; | |
| background: rgba(0, 0, 0, 0.72); | |
| backdrop-filter: blur(6px); | |
| font-size: 0.72rem; | |
| pointer-events: none; | |
| } | |
| .hud-title { | |
| font-family: var(--font-display); | |
| font-size: 0.95rem; | |
| letter-spacing: 0; | |
| color: var(--white); | |
| } | |
| .map-hud .sparkline { | |
| width: 160px; | |
| height: 18px; | |
| } | |
| .map-legend { | |
| position: absolute; | |
| right: 12px; | |
| bottom: 10px; | |
| z-index: 1; | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: flex-end; | |
| gap: 6px 14px; | |
| max-width: 70%; | |
| padding: 6px 10px; | |
| border-radius: 10px; | |
| background: rgba(0, 0, 0, 0.6); | |
| font-size: 0.66rem; | |
| color: var(--text-2); | |
| pointer-events: none; | |
| } | |
| .map-legend span { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .map-legend i { | |
| display: inline-block; | |
| } | |
| .lg-size { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| background: var(--white); | |
| box-shadow: 0 0 8px var(--blue), -8px 0 0 -3px var(--white); | |
| margin-left: 6px; | |
| } | |
| .lg-bright { | |
| width: 26px; | |
| height: 6px; | |
| border-radius: 3px; | |
| background: linear-gradient(90deg, var(--blue), #ffffff); | |
| } | |
| .lg-tail { | |
| width: 22px; | |
| height: 4px; | |
| border-radius: 3px; | |
| background: linear-gradient(90deg, #ffffff, transparent); | |
| } | |
| .lg-dormant { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| border: 1px dashed rgba(255, 255, 255, 0.6); | |
| } | |
| .lg-line { | |
| width: 22px; | |
| height: 0; | |
| border-top: 2px solid rgba(255, 255, 255, 0.4); | |
| } | |
| .map-hint { | |
| display: none; | |
| } | |
| /* Side panel: briefing and star detail */ | |
| .brief { | |
| display: grid; | |
| gap: 6px; | |
| padding-top: 10px; | |
| border-top: 1px solid var(--line); | |
| } | |
| .brief h3 { | |
| font-size: 0.8rem; | |
| font-family: var(--font-mono); | |
| letter-spacing: 0.14em; | |
| text-transform: uppercase; | |
| color: var(--blue); | |
| } | |
| .brief-list { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| display: grid; | |
| gap: 6px; | |
| } | |
| .brief-list li { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: baseline; | |
| gap: 10px; | |
| font-size: 0.875rem; | |
| } | |
| .brief-list .mono { | |
| font-size: 0.7rem; | |
| white-space: nowrap; | |
| } | |
| .brief-up { | |
| color: var(--white); | |
| text-shadow: 0 0 8px var(--blue); | |
| } | |
| .star-stats { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 8px; | |
| margin: 0; | |
| } | |
| .star-stats div { | |
| display: grid; | |
| gap: 2px; | |
| padding: 8px; | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| } | |
| .star-stats dt { | |
| font: 0.62rem var(--font-mono); | |
| letter-spacing: 0.1em; | |
| text-transform: uppercase; | |
| color: var(--text-3); | |
| } | |
| .star-stats dd { | |
| margin: 0; | |
| font-size: 0.82rem; | |
| } | |
| .timeline { | |
| display: grid; | |
| gap: 4px; | |
| } | |
| .sparkline { | |
| width: 100%; | |
| height: 44px; | |
| } | |
| .sparkline rect { | |
| fill: rgba(33, 124, 255, 0.55); | |
| } | |
| .sparkline rect.recent { | |
| fill: #ffffff; | |
| } | |
| .status-rising { | |
| border: 1px solid var(--white); | |
| color: var(--white); | |
| box-shadow: 0 0 10px var(--blue-60); | |
| } | |
| .status-steady { | |
| border: 1px solid var(--blue-60); | |
| color: var(--white); | |
| } | |
| .status-dormant { | |
| border: 1px dashed var(--line-strong); | |
| color: var(--text-2); | |
| } | |
| .chip-btn { | |
| background: transparent; | |
| color: var(--white); | |
| font: inherit; | |
| font-size: 0.75rem; | |
| cursor: pointer; | |
| } | |
| .chip-btn:hover { | |
| border-color: var(--blue); | |
| background: var(--blue-10); | |
| } | |
| .chip-btn .mono { | |
| font-size: 0.65rem; | |
| color: var(--blue); | |
| margin-left: 4px; | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .orbit-ring { | |
| animation: none; | |
| } | |
| } | |