Spaces:
Running
Running
| :root { | |
| --background: #121212; | |
| --foreground: #e0e0e0; | |
| --surface1: #1a1a1a; | |
| --surface2: #242424; | |
| --primary-text: #e0e0e0; | |
| --secondary-text: #aaaaaa; | |
| --accent: #ffdd57; | |
| --accent-hover: #ffc800; | |
| --border-color: #333333; | |
| --graph-node-theorem: #3b82f6; | |
| /* blue */ | |
| --graph-node-lemma: #3b82f6; | |
| /* treat lemmas like theorems */ | |
| --graph-node-definition: #22c55e; | |
| /* green */ | |
| --graph-node-remark: #ef4444; | |
| /* red (remarks) */ | |
| --graph-node-example: #a855f7; | |
| /* purple (facts/examples) */ | |
| --graph-node-corollary: #f97316; | |
| /* orange (corollaries) */ | |
| --graph-node-external: #b45309; | |
| /* brown (external references) */ | |
| --graph-node-generic: #e5e7eb; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| html, | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| height: 100%; | |
| } | |
| body { | |
| background: var(--background); | |
| color: var(--primary-text); | |
| font-family: 'Source Serif 4', Georgia, serif; | |
| } | |
| .hidden { | |
| display: none ; | |
| } | |
| h1, | |
| h2, | |
| h3 { | |
| font-family: 'Inter', system-ui, sans-serif; | |
| } | |
| code { | |
| font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, | |
| 'Liberation Mono', 'Courier New', monospace; | |
| background-color: var(--surface2); | |
| padding: 0.2em 0.4em; | |
| border-radius: 4px; | |
| font-size: 0.9em; | |
| color: var(--accent); | |
| } | |
| .page-root { | |
| min-height: 100vh; | |
| display: flex; | |
| justify-content: center; | |
| padding: 1rem 1rem 2.5rem; | |
| } | |
| .page-inner { | |
| width: 100%; | |
| max-width: 72rem; | |
| /* ~max-w-6xl */ | |
| } | |
| /* Hero (landing) --------------------------------------------------------- */ | |
| .hero { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .hero-header { | |
| width: 100%; | |
| max-width: 48rem; | |
| /* ~max-w-4xl */ | |
| text-align: center; | |
| } | |
| .hero-title { | |
| margin: 0; | |
| font-size: 2.6rem; | |
| font-weight: 900; | |
| letter-spacing: -0.04em; | |
| color: var(--accent); | |
| } | |
| /* Make the title behave like a "home" button. */ | |
| #home-title { | |
| cursor: pointer; | |
| } | |
| #home-title:hover { | |
| text-decoration: underline; | |
| } | |
| .hero-subtitle { | |
| margin-top: 0.5rem; | |
| font-size: 1.1rem; | |
| color: var(--secondary-text); | |
| } | |
| .hero-form { | |
| width: 100%; | |
| max-width: 40rem; | |
| /* ~max-w-xl */ | |
| margin-top: 2rem; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.75rem; | |
| background: var(--surface1); | |
| border: 1px solid var(--border-color); | |
| border-radius: 12px; | |
| padding: 16px; | |
| } | |
| .hero-form-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .hero-input { | |
| flex-grow: 1; | |
| padding: 0.75rem 0.9rem; | |
| border-radius: 10px; | |
| border: 1px solid var(--border-color); | |
| background: var(--surface2); | |
| color: var(--primary-text); | |
| font-family: 'Inter', system-ui, sans-serif; | |
| font-size: 0.9rem; | |
| } | |
| .hero-input::placeholder { | |
| color: #6b6b6b; | |
| } | |
| .hero-input:focus { | |
| outline: none; | |
| border-color: var(--accent); | |
| } | |
| .hero-button { | |
| padding: 0.75rem 1.5rem; | |
| border-radius: 10px; | |
| border: 2px solid var(--accent); | |
| background: var(--accent); | |
| color: var(--background); | |
| font-family: 'Inter', system-ui, sans-serif; | |
| font-size: 0.9rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| white-space: nowrap; | |
| } | |
| .hero-button:disabled { | |
| opacity: 0.6; | |
| cursor: default; | |
| } | |
| .hero-footnote-row { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-start; | |
| gap: 0.5rem; | |
| } | |
| .hero-error { | |
| margin: 0; | |
| font-family: 'Inter', system-ui, sans-serif; | |
| font-size: 0.85rem; | |
| color: #ff6b6b; | |
| } | |
| .dataset-base-display { | |
| font-family: 'Inter', system-ui, sans-serif; | |
| font-size: 0.75rem; | |
| color: var(--secondary-text); | |
| text-align: right; | |
| word-break: break-all; | |
| } | |
| .hero-carousel { | |
| width: 100%; | |
| max-width: 40rem; | |
| /* Extra breathing room so the cards never feel like they touch | |
| the search box above, even on small screens. */ | |
| margin-top: 2.25rem; | |
| } | |
| .hero-carousel-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 0.75rem; | |
| } | |
| .hero-list-intro { | |
| font-family: 'Inter', system-ui, sans-serif; | |
| font-size: 0.9rem; | |
| color: var(--secondary-text); | |
| text-align: center; | |
| } | |
| .hero-carousel-dots { | |
| margin-top: 0.5rem; | |
| display: flex; | |
| justify-content: center; | |
| gap: 0.4rem; | |
| } | |
| .hero-carousel-dot { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 999px; | |
| border: 1px solid var(--border-color); | |
| background: var(--surface2); | |
| padding: 0; | |
| cursor: pointer; | |
| } | |
| .hero-carousel-dot:hover { | |
| border-color: var(--accent); | |
| background: var(--accent); | |
| } | |
| .hero-carousel-nav { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.35rem; | |
| } | |
| .hero-carousel-btn { | |
| width: 28px; | |
| height: 28px; | |
| border-radius: 999px; | |
| border: 1px solid var(--border-color); | |
| background: var(--surface2); | |
| color: var(--secondary-text); | |
| font-size: 0.9rem; | |
| cursor: pointer; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 0; | |
| } | |
| .hero-carousel-btn:hover { | |
| border-color: var(--accent); | |
| color: var(--accent); | |
| } | |
| .sample-papers { | |
| width: 100%; | |
| max-width: 40rem; | |
| margin-top: 0.75rem; | |
| display: flex; | |
| flex-direction: row; | |
| gap: 0.75rem; | |
| } | |
| .sample-paper-card { | |
| flex: 1 1 0; | |
| border-radius: 10px; | |
| border: 1px solid var(--border-color); | |
| background: var(--surface1); | |
| padding: 10px 12px; | |
| cursor: pointer; | |
| text-align: left; | |
| transition: border-color 0.12s ease, background-color 0.12s ease, transform 0.12s ease; | |
| } | |
| .sample-paper-card:hover { | |
| border-color: var(--accent); | |
| background: var(--surface2); | |
| transform: translateY(-1px); | |
| } | |
| .sample-paper-title { | |
| margin: 0; | |
| font-family: 'Inter', system-ui, sans-serif; | |
| font-size: 0.85rem; | |
| font-weight: 600; | |
| color: #ffffff; | |
| /* Allow up to 2 lines with a clamp so titles are readable | |
| without making the cards excessively tall. */ | |
| display: -webkit-box; | |
| -webkit-line-clamp: 2; | |
| -webkit-box-orient: vertical; | |
| overflow: hidden; | |
| } | |
| .sample-paper-authors { | |
| margin-top: 0.25rem; | |
| font-family: 'Inter', system-ui, sans-serif; | |
| font-size: 0.75rem; | |
| color: var(--secondary-text); | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .hero-carousel-track { | |
| margin-top: 0.5rem; | |
| display: grid; | |
| grid-template-columns: auto 1fr auto; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| /* Ensure the middle grid item can shrink; otherwise the flex row can | |
| overflow and push the right nav button off-screen. */ | |
| .sample-papers { | |
| min-width: 0; | |
| max-width: 100%; | |
| } | |
| /* Cards should also be allowed to shrink within the flex row. */ | |
| .sample-paper-card { | |
| min-width: 0; | |
| } | |
| /* The HTML uses `hero-carousel-dot hero-carousel-dot--side` for the | |
| prev/next controls. Style them like arrow buttons (not tiny dots). */ | |
| .hero-carousel-dot--side { | |
| width: 32px; | |
| height: 32px; | |
| border-radius: 999px; | |
| border: 1px solid var(--border-color); | |
| background: var(--surface2); | |
| color: var(--secondary-text); | |
| font-size: 1.1rem; | |
| cursor: pointer; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 0; | |
| } | |
| .hero-carousel-dot--side:hover { | |
| border-color: var(--accent); | |
| color: var(--accent); | |
| } | |
| /* Inject the arrow glyphs so we don't need to change HTML. */ | |
| #carousel-prev::before { | |
| content: "‹"; | |
| } | |
| #carousel-next::before { | |
| content: "›"; | |
| } | |
| /* Paper + graph area ----------------------------------------------------- */ | |
| .paper-area { | |
| margin-top: 2.5rem; | |
| } | |
| .empty-state-card { | |
| background: var(--surface1); | |
| border: 1px solid var(--border-color); | |
| border-radius: 12px; | |
| padding: 16px; | |
| } | |
| .empty-state-title { | |
| margin: 0 0 0.4rem; | |
| font-family: 'Inter', system-ui, sans-serif; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| } | |
| .empty-state-body { | |
| margin: 0; | |
| font-family: 'Inter', system-ui, sans-serif; | |
| font-size: 0.9rem; | |
| color: var(--secondary-text); | |
| } | |
| .paper-card { | |
| background: var(--surface1); | |
| border: 1px solid var(--border-color); | |
| border-radius: 12px; | |
| padding: 16px; | |
| } | |
| .paper-header-top { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: space-between; | |
| align-items: flex-start; | |
| gap: 1rem; | |
| } | |
| .paper-header-main { | |
| flex: 1 1 260px; | |
| } | |
| .paper-title-row { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| gap: 0.75rem; | |
| } | |
| .paper-title { | |
| margin: 0; | |
| font-size: 1.6rem; | |
| font-weight: 900; | |
| letter-spacing: -0.03em; | |
| color: var(--accent); | |
| } | |
| .paper-authors { | |
| margin-top: 0.4rem; | |
| font-size: 0.9rem; | |
| font-family: 'Inter', system-ui, sans-serif; | |
| color: var(--secondary-text); | |
| } | |
| .paper-link-btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 36px; | |
| height: 36px; | |
| border-radius: 10px; | |
| border: 1px solid var(--border-color); | |
| background: var(--surface2); | |
| transition: transform 0.12s ease, border-color 0.12s ease; | |
| } | |
| .paper-link-btn:hover { | |
| border-color: var(--accent); | |
| transform: translateY(-1px); | |
| } | |
| .paper-link-icon { | |
| font-size: 0.9rem; | |
| filter: invert(0.92); | |
| opacity: 0.9; | |
| } | |
| .paper-abstract { | |
| margin-top: 0.75rem; | |
| font-size: 0.9rem; | |
| line-height: 1.5; | |
| background: var(--surface2); | |
| border-radius: 10px; | |
| border: 1px solid var(--border-color); | |
| padding: 12px; | |
| color: var(--primary-text); | |
| } | |
| .paper-status-line { | |
| margin-top: 0.75rem; | |
| font-family: 'Inter', system-ui, sans-serif; | |
| font-size: 0.85rem; | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.5rem; | |
| color: var(--secondary-text); | |
| } | |
| .paper-error-text { | |
| color: #ff6b6b; | |
| } | |
| /* Constellations-inspired graph shell ----------------------------------- */ | |
| .graph-section { | |
| margin-top: 1.5rem; | |
| } | |
| .graph-title { | |
| margin: 0 0 0.4rem; | |
| font-family: 'Inter', system-ui, sans-serif; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| } | |
| .graph-shell { | |
| position: relative; | |
| width: 100%; | |
| height: 70vh; | |
| min-height: 320px; | |
| overflow: hidden; | |
| border-radius: 12px; | |
| background: var(--background); | |
| border: 1px solid var(--border-color); | |
| } | |
| .graph-container { | |
| position: relative; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .graph-svg { | |
| width: 100%; | |
| height: 100%; | |
| cursor: move; | |
| } | |
| #tooltip { | |
| position: absolute; | |
| /* Display is controlled via JS by toggling opacity; keep it block-level | |
| here so `opacity: 0` fully hides it while still allowing positioning. */ | |
| max-width: 450px; | |
| z-index: 50; | |
| background: var(--surface2); | |
| color: var(--primary-text); | |
| padding: 12px; | |
| border-radius: 8px; | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35); | |
| border: 1px solid var(--border-color); | |
| pointer-events: none; | |
| font-family: 'Inter', system-ui, sans-serif; | |
| font-size: 0.78rem; | |
| } | |
| .math-content { | |
| font-size: 12px; | |
| line-height: 1.35; | |
| } | |
| .legend { | |
| position: absolute; | |
| left: 12px; | |
| bottom: 12px; | |
| z-index: 20; | |
| background: var(--surface1); | |
| border: 1px solid var(--border-color); | |
| border-radius: 10px; | |
| padding: 12px 12px; | |
| max-width: 420px; | |
| color: var(--primary-text); | |
| } | |
| .legend-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 10px; | |
| margin-bottom: 8px; | |
| } | |
| .legend-section-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 10px; | |
| margin-bottom: 6px; | |
| } | |
| .legend-title { | |
| margin: 0; | |
| font-weight: 900; | |
| font-size: 12px; | |
| font-family: 'Inter', system-ui, sans-serif; | |
| color: var(--accent); | |
| } | |
| #legend-stats { | |
| margin: 0; | |
| font-weight: 800; | |
| font-size: 12px; | |
| font-family: 'Inter', system-ui, sans-serif; | |
| } | |
| .legend-reset-btn { | |
| border: none; | |
| background: none; | |
| color: var(--secondary-text); | |
| font-family: 'Inter', system-ui, sans-serif; | |
| font-size: 11px; | |
| cursor: pointer; | |
| } | |
| .legend-reset-btn:hover { | |
| color: var(--accent); | |
| } | |
| .legend-toggle { | |
| border: 1px solid var(--border-color); | |
| background: var(--surface2); | |
| color: var(--primary-text); | |
| font-family: 'Inter', system-ui, sans-serif; | |
| font-size: 12px; | |
| width: 28px; | |
| height: 24px; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| line-height: 1; | |
| } | |
| .legend-toggle:hover { | |
| border-color: var(--accent); | |
| color: var(--accent); | |
| } | |
| .legend--collapsed { | |
| max-width: 180px; | |
| } | |
| .legend--collapsed .legend-body { | |
| display: none; | |
| } | |
| .legend-grid { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px 10px; | |
| } | |
| .legend-item { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| cursor: pointer; | |
| user-select: none; | |
| font-size: 12px; | |
| font-family: 'Inter', system-ui, sans-serif; | |
| color: var(--primary-text); | |
| } | |
| .legend-item.inactive { | |
| opacity: 0.35; | |
| } | |
| .legend-color { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 3px; | |
| } | |
| .edge-legend-line { | |
| width: 16px; | |
| height: 3px; | |
| border-radius: 3px; | |
| } | |
| #info-panel { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| width: 360px; | |
| max-width: 92%; | |
| height: 100%; | |
| overflow: auto; | |
| z-index: 30; | |
| background: var(--surface2); | |
| border-left: 1px solid var(--border-color); | |
| display: flex; | |
| flex-direction: column; | |
| transform: translateX(105%); | |
| transition: transform 0.25s ease-in-out; | |
| } | |
| #info-panel.visible { | |
| transform: translateX(0); | |
| } | |
| #info-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 10px; | |
| padding: 14px 14px; | |
| border-bottom: 1px solid var(--border-color); | |
| font-family: 'Inter', system-ui, sans-serif; | |
| } | |
| #info-title { | |
| font-weight: 800; | |
| color: var(--primary-text); | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .info-title-flag-btn { | |
| border: none; | |
| background: none; | |
| padding: 0; | |
| margin-left: 4px; | |
| cursor: pointer; | |
| color: var(--secondary-text); | |
| } | |
| .info-title-flag-btn:hover { | |
| color: var(--accent); | |
| } | |
| #close-info-panel { | |
| border: none; | |
| background: none; | |
| color: var(--secondary-text); | |
| font-size: 24px; | |
| font-weight: bold; | |
| cursor: pointer; | |
| } | |
| #close-info-panel:hover { | |
| color: var(--accent); | |
| } | |
| #info-body { | |
| padding: 14px; | |
| font-size: 13px; | |
| color: var(--primary-text); | |
| } | |
| #info-body h4 { | |
| margin-top: 14px; | |
| margin-bottom: 6px; | |
| padding-bottom: 6px; | |
| border-bottom: 1px solid var(--border-color); | |
| color: var(--accent); | |
| font-family: 'Inter', system-ui, sans-serif; | |
| } | |
| .node { | |
| stroke: var(--surface1); | |
| stroke-width: 3px; | |
| cursor: pointer; | |
| } | |
| .node:hover { | |
| stroke: var(--accent); | |
| } | |
| .node.selected { | |
| stroke: var(--accent); | |
| } | |
| .link { | |
| stroke-opacity: 0.6; | |
| stroke-width: 1.5px; | |
| transition: stroke-width 0.2s, stroke-opacity 0.2s; | |
| cursor: pointer; | |
| } | |
| .link:hover { | |
| stroke-width: 4px; | |
| stroke-opacity: 1; | |
| } | |
| .node-label { | |
| font-size: 12px; | |
| fill: var(--primary-text); | |
| text-anchor: middle; | |
| pointer-events: none; | |
| font-weight: 500; | |
| font-family: 'Inter', system-ui, sans-serif; | |
| } | |
| .floating-controls { | |
| position: absolute; | |
| top: 85px; | |
| left: 15px; | |
| display: none; | |
| gap: 8px; | |
| z-index: 100; | |
| pointer-events: all; | |
| } | |
| .floating-controls button { | |
| padding: 6px 12px; | |
| border: 1px solid var(--border-color); | |
| background: var(--surface2); | |
| border-radius: 4px; | |
| cursor: pointer; | |
| font-size: 14px; | |
| transition: background-color 0.2s; | |
| color: var(--primary-text); | |
| font-family: 'Inter', system-ui, sans-serif; | |
| } | |
| .floating-controls button:hover { | |
| background: var(--surface1); | |
| } | |
| .floating-controls button.primary { | |
| background: var(--accent); | |
| border-color: var(--accent); | |
| color: var(--background); | |
| font-weight: 700; | |
| } | |
| .floating-controls button.primary:hover { | |
| background: var(--accent-hover); | |
| border-color: var(--accent-hover); | |
| } | |
| /* Definition bank card */ | |
| .definition-bank-title { | |
| font-family: 'Inter', system-ui, sans-serif; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| margin: 0; | |
| } | |
| .definition-bank-subtitle { | |
| margin: 0.25rem 0 0; | |
| font-family: 'Inter', system-ui, sans-serif; | |
| font-size: 0.8rem; | |
| color: var(--secondary-text); | |
| } | |
| .definition-bank-card { | |
| width: 100%; | |
| border-radius: 12px; | |
| padding: 16px; | |
| border: 1px solid var(--border-color); | |
| background: var(--surface1); | |
| color: var(--primary-text); | |
| } | |
| .definition-bank-header { | |
| display: flex; | |
| align-items: baseline; | |
| justify-content: space-between; | |
| gap: 0.75rem; | |
| } | |
| .definition-bank-count { | |
| font-size: 0.75rem; | |
| font-family: 'Inter', system-ui, sans-serif; | |
| color: var(--secondary-text); | |
| } | |
| .definition-bank-list { | |
| margin-top: 0.75rem; | |
| max-height: 20rem; | |
| overflow-y: auto; | |
| } | |
| .definition-item-card { | |
| padding: 6px 8px; | |
| border-radius: 6px; | |
| } | |
| .definition-item-card:hover { | |
| background: var(--surface2); | |
| } | |
| .definition-item-term { | |
| font-size: 0.9rem; | |
| font-weight: 600; | |
| font-family: 'Inter', system-ui, sans-serif; | |
| } | |
| .definition-item-text { | |
| margin-top: 2px; | |
| font-size: 0.8rem; | |
| color: var(--secondary-text); | |
| } |