Spaces:
Running
Running
| /* TAF Agent — minimal clean styling */ | |
| /* v0.7.0 — main panels foldable (every section under <main>) */ | |
| .main-panel { margin: 0; } | |
| .main-panel > .main-panel-title { | |
| cursor: pointer; | |
| list-style: none; | |
| user-select: none; | |
| padding: 0 0 0.5em; | |
| margin-bottom: 0.6em; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.06); | |
| display: flex; | |
| align-items: baseline; | |
| gap: 0.5em; | |
| } | |
| .main-panel > .main-panel-title::-webkit-details-marker { display: none; } | |
| .main-panel > .main-panel-title::marker { content: ""; } | |
| .main-panel > .main-panel-title::before { | |
| content: "▼"; | |
| display: inline-block; | |
| font-size: 0.65em; | |
| color: #58a6ff; | |
| margin-right: 0.3em; | |
| transition: transform 0.15s ease; | |
| flex-shrink: 0; | |
| } | |
| .main-panel:not([open]) > .main-panel-title::before { transform: rotate(-90deg); } | |
| .main-panel > .main-panel-title:hover { background: rgba(255, 255, 255, 0.02); } | |
| .main-panel > .main-panel-title h2 { | |
| display: inline; | |
| margin: 0; | |
| vertical-align: baseline; | |
| flex: 1; | |
| } | |
| /* v0.7.7 — Task tiles: groups 14 modes by user intent, primary entry point */ | |
| #task-tiles { margin-bottom: 1em; } | |
| #task-tiles h2 { margin-bottom: 0.3em; } | |
| #task-tiles .recipe-desc { margin-bottom: 0.8em; opacity: 0.85; } | |
| .tiles-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 0.8em; | |
| } | |
| .task-tile { | |
| padding: 0.9em 1em; | |
| background: #12181f; | |
| border: 1px solid rgba(88, 166, 255, 0.2); | |
| border-radius: 10px; | |
| transition: border-color 0.15s, transform 0.15s; | |
| } | |
| .task-tile:hover { | |
| border-color: rgba(88, 166, 255, 0.5); | |
| } | |
| .task-tile h3 { | |
| margin: 0 0 0.3em; | |
| font-size: 1.05em; | |
| color: #58a6ff; | |
| } | |
| .task-tile .tile-desc { | |
| font-size: 0.88em; | |
| opacity: 0.8; | |
| margin: 0 0 0.6em; | |
| line-height: 1.4; | |
| } | |
| .task-tile .tile-modes { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.35em; | |
| } | |
| .task-tile .tile-modes button { | |
| font-size: 0.85em; | |
| padding: 0.35em 0.7em; | |
| background: rgba(88, 166, 255, 0.10); | |
| border: 1px solid rgba(88, 166, 255, 0.25); | |
| color: #c9d1d9; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| transition: background 0.12s, border-color 0.12s; | |
| } | |
| .task-tile .tile-modes button:hover { | |
| background: rgba(88, 166, 255, 0.22); | |
| border-color: rgba(88, 166, 255, 0.55); | |
| } | |
| /* v0.7.5 — Cross-framework drift bound */ | |
| /* Drift section overrides the default 980px main width so the two-column form | |
| has room without overlapping. Mobile (<800px) collapses to single column. */ | |
| #drift-section { | |
| max-width: 1100px; | |
| } | |
| .drift-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 1em; | |
| margin: 0.6em 0 0.8em; | |
| align-items: start; | |
| } | |
| @media (max-width: 800px) { | |
| .drift-grid { grid-template-columns: 1fr; } | |
| } | |
| .drift-setup { | |
| border: 1px solid rgba(88, 166, 255, 0.3); | |
| border-radius: 8px; | |
| padding: 0.6em 1em 0.4em; | |
| min-width: 0; /* fix: lets grid item shrink instead of overflowing */ | |
| box-sizing: border-box; | |
| overflow: hidden; /* clip any overlong content cleanly */ | |
| } | |
| .drift-setup legend { | |
| padding: 0 0.5em; | |
| font-weight: 600; | |
| color: #58a6ff; | |
| } | |
| .drift-setup .form-row { | |
| flex-wrap: wrap; | |
| gap: 0.4em 0.6em; | |
| margin: 0.35em 0; | |
| } | |
| .drift-setup .form-row label { | |
| flex: 0 0 110px; | |
| font-size: 0.92em; | |
| } | |
| .drift-setup .form-row input, | |
| .drift-setup .form-row select { | |
| flex: 1 1 120px; | |
| min-width: 0; | |
| } | |
| /* v0.7.4 — HF Hub autocomplete dropdown (attached to body) */ | |
| .hf-autocomplete-dropdown { | |
| background: #12181f; | |
| border: 1px solid rgba(88, 166, 255, 0.4); | |
| border-radius: 6px; | |
| max-height: 320px; | |
| overflow-y: auto; | |
| box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); | |
| font-size: 0.92em; | |
| } | |
| .hf-autocomplete-dropdown .hf-result { | |
| display: flex; | |
| flex-direction: column; | |
| padding: 0.5em 0.7em; | |
| cursor: pointer; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.04); | |
| } | |
| .hf-autocomplete-dropdown .hf-result:last-child { border-bottom: none; } | |
| .hf-autocomplete-dropdown .hf-result:hover, | |
| .hf-autocomplete-dropdown .hf-result.active { | |
| background: rgba(88, 166, 255, 0.15); | |
| } | |
| .hf-autocomplete-dropdown .hf-result-id { | |
| font-family: monospace; | |
| color: #c9d1d9; | |
| } | |
| .hf-autocomplete-dropdown .hf-result-meta { | |
| font-size: 0.8em; | |
| opacity: 0.65; | |
| margin-top: 0.15em; | |
| } | |
| .hf-autocomplete-dropdown .hf-notice { | |
| padding: 0.5em 0.7em; | |
| font-size: 0.82em; | |
| color: #f1c40f; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.04); | |
| } | |
| .hf-autocomplete-dropdown .hf-privacy { | |
| padding: 0.4em 0.7em; | |
| font-size: 0.72em; | |
| opacity: 0.55; | |
| text-align: center; | |
| border-top: 1px solid rgba(255, 255, 255, 0.06); | |
| background: rgba(0, 0, 0, 0.3); | |
| } | |
| /* v0.7.2 — Arena-Elo CI reconstructor */ | |
| .arena-result { margin-top: 0.6em; } | |
| .arena-table, .arena-ties-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 0.92em; | |
| } | |
| .arena-table th, .arena-ties-table th { | |
| text-align: left; | |
| font-weight: 600; | |
| font-size: 0.78em; | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| color: #58a6ff; | |
| padding: 0.45em 0.6em; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.12); | |
| } | |
| .arena-table td, .arena-ties-table td { | |
| padding: 0.45em 0.6em; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.04); | |
| vertical-align: middle; | |
| } | |
| .arena-table tr:hover, .arena-ties-table tr:hover { background: rgba(88, 166, 255, 0.04); } | |
| .arena-rank { color: #8b949e; font-family: monospace; } | |
| .arena-elo { font-family: monospace; } | |
| .arena-ci, .arena-spread, .arena-matches, .arena-wlt { font-family: monospace; font-size: 0.9em; opacity: 0.85; } | |
| .arena-tie-count { font-size: 0.85em; opacity: 0.7; font-weight: normal; } | |
| /* v0.7.1 — Chat-template Sniffer mode */ | |
| .template-cmd-block { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5em; | |
| } | |
| .template-cmd-label { | |
| font-size: 0.78em; | |
| font-weight: 600; | |
| color: #58a6ff; | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| margin-top: 0.4em; | |
| } | |
| .template-cmd { | |
| margin: 0; | |
| padding: 0.6em 0.8em; | |
| background: rgba(0, 0, 0, 0.35); | |
| border: 1px solid rgba(255, 255, 255, 0.06); | |
| border-radius: 6px; | |
| font-family: monospace; | |
| font-size: 0.85em; | |
| line-height: 1.45; | |
| white-space: pre-wrap; | |
| overflow-x: auto; | |
| } | |
| /* v0.7.0 — Unmask mode (SWA + RoPE-scaling detector) */ | |
| .unmask-result { | |
| margin-top: 0.8em; | |
| } | |
| .unmask-hero { | |
| padding: 1em 1.2em; | |
| border: 2px solid #58a6ff; | |
| border-radius: 10px; | |
| background: #12181f; | |
| margin-bottom: 0.8em; | |
| } | |
| .unmask-verdict { | |
| font-size: 1.6em; | |
| font-weight: 700; | |
| margin-bottom: 0.2em; | |
| } | |
| .unmask-model { | |
| font-size: 0.92em; | |
| opacity: 0.85; | |
| margin-bottom: 0.6em; | |
| } | |
| .unmask-numbers { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); | |
| gap: 0.6em; | |
| margin-top: 0.5em; | |
| } | |
| .unmask-numbers > div { | |
| display: flex; | |
| flex-direction: column; | |
| padding: 0.5em 0.7em; | |
| background: rgba(0, 0, 0, 0.25); | |
| border-radius: 6px; | |
| } | |
| .unmask-num-label { | |
| font-size: 0.78em; | |
| opacity: 0.75; | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| } | |
| .unmask-num-val { | |
| font-size: 1.3em; | |
| font-weight: 600; | |
| font-family: monospace; | |
| margin-top: 0.15em; | |
| } | |
| .unmask-details { | |
| padding: 0.8em 1em; | |
| background: #12181f; | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| border-radius: 8px; | |
| } | |
| .unmask-details h4, | |
| .unmask-panel-title { | |
| margin: 0.4em 0 0.3em; | |
| color: #58a6ff; | |
| font-size: 0.95em; | |
| cursor: pointer; | |
| list-style: none; | |
| user-select: none; | |
| font-weight: 600; | |
| } | |
| .unmask-panel-title::-webkit-details-marker { display: none; } | |
| .unmask-panel-title::marker { content: ""; } | |
| .unmask-panel-title::before { | |
| content: "▼"; | |
| display: inline-block; | |
| font-size: 0.75em; | |
| margin-right: 0.4em; | |
| color: #58a6ff; | |
| transition: transform 0.15s ease; | |
| width: 0.9em; | |
| text-align: center; | |
| } | |
| .unmask-panel:not([open]) > .unmask-panel-title::before { transform: rotate(-90deg); } | |
| .unmask-panel { margin: 0.5em 0; } | |
| .unmask-details ul { | |
| margin: 0.2em 0 0.6em; | |
| padding-left: 1.2em; | |
| font-size: 0.92em; | |
| line-height: 1.5; | |
| } | |
| .unmask-reco { | |
| margin: 0.2em 0 0.4em; | |
| padding: 0.6em 0.8em; | |
| background: rgba(88, 166, 255, 0.08); | |
| border-left: 3px solid #58a6ff; | |
| border-radius: 0 6px 6px 0; | |
| font-size: 0.92em; | |
| line-height: 1.5; | |
| } | |
| /* v0.6.2 — landing rework: quick-start strip + inventory grid + arch-supported */ | |
| #quickstart-strip { | |
| margin: 1.5em auto 1em; | |
| padding: 1em 1.2em; | |
| max-width: 980px; | |
| background: #12181f; | |
| border: 1px solid rgba(88, 166, 255, 0.25); | |
| border-radius: 8px; | |
| } | |
| #quickstart-strip h2 { | |
| margin: 0 0 0.6em; | |
| font-size: 1.25em; | |
| color: #58a6ff; | |
| } | |
| .qs-steps { | |
| margin: 0 0 0.8em; | |
| padding: 0; | |
| list-style: none; | |
| counter-reset: qs; | |
| } | |
| .qs-steps li { | |
| counter-increment: qs; | |
| margin: 0.5em 0; | |
| padding-left: 2.4em; | |
| position: relative; | |
| line-height: 1.5; | |
| } | |
| .qs-steps li::before { | |
| content: counter(qs); | |
| position: absolute; | |
| left: 0; | |
| top: 0.05em; | |
| width: 1.7em; | |
| height: 1.7em; | |
| border-radius: 50%; | |
| background: #58a6ff; | |
| color: #0a0e14; | |
| text-align: center; | |
| font-weight: 700; | |
| line-height: 1.7em; | |
| font-size: 0.9em; | |
| } | |
| .qs-cta { | |
| margin: 0.6em 0 0; | |
| } | |
| .btn-primary { | |
| display: inline-block; | |
| padding: 0.55em 1.1em; | |
| background: #58a6ff; | |
| color: #0a0e14; | |
| text-decoration: none; | |
| border-radius: 6px; | |
| font-weight: 600; | |
| border: none; | |
| } | |
| .btn-primary:hover { background: #1f6feb; color: #fff; } | |
| #inventory-strip { | |
| margin: 1em auto 1.5em; | |
| max-width: 980px; | |
| } | |
| #inventory-strip h2 { | |
| margin: 0 0 0.8em; | |
| font-size: 1.2em; | |
| color: #58a6ff; | |
| } | |
| .inventory-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); | |
| gap: 0.8em; | |
| } | |
| .inv-card { | |
| padding: 0.7em 1em; | |
| background: #12181f; | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| border-radius: 8px; | |
| } | |
| .inv-card-title { | |
| cursor: pointer; | |
| font-size: 1em; | |
| font-weight: 600; | |
| color: #58a6ff; | |
| padding: 0.2em 0; | |
| list-style: none; /* hide native marker (Chrome, Safari) */ | |
| user-select: none; | |
| } | |
| .inv-card-title::-webkit-details-marker { display: none; } /* Safari */ | |
| .inv-card-title::marker { content: ""; } /* Firefox */ | |
| .inv-card-title::before { | |
| content: "▼"; | |
| display: inline-block; | |
| font-size: 0.75em; | |
| margin-right: 0.4em; | |
| color: #58a6ff; | |
| transition: transform 0.15s ease; | |
| width: 0.9em; | |
| text-align: center; | |
| } | |
| .inv-card:not([open]) > .inv-card-title::before { transform: rotate(-90deg); } | |
| .inv-card ul { | |
| margin: 0.4em 0 0; | |
| padding-left: 1em; | |
| font-size: 0.92em; | |
| line-height: 1.5; | |
| } | |
| .inv-card li { margin: 0.3em 0; } | |
| .arch-supported { | |
| margin: 1em auto 0; | |
| max-width: 980px; | |
| font-size: 0.92em; | |
| } | |
| .arch-supported summary { | |
| cursor: pointer; | |
| padding: 0.4em 0; | |
| opacity: 0.8; | |
| } | |
| .arch-supported summary:hover { opacity: 1; } | |
| .arch-supported .arch-badges { | |
| margin-top: 0.4em; | |
| } | |
| /* a11y: skip-to-main link, visible only on keyboard focus */ | |
| .skip-link { | |
| position: absolute; | |
| left: 0; top: -40px; | |
| background: #58a6ff; | |
| color: #0a0e14; | |
| padding: 0.5em 1em; | |
| text-decoration: none; | |
| font-weight: 600; | |
| z-index: 9999; | |
| transition: top 0.15s; | |
| } | |
| .skip-link:focus { top: 0; outline: 2px solid #fff; } | |
| :root { | |
| --bg: #0a0e14; | |
| --bg-card: #12181f; | |
| --bg-input: #1a2028; | |
| --fg: #c9d1d9; | |
| --fg-dim: #8b949e; | |
| --accent: #58a6ff; | |
| --accent-dim: #1f6feb; | |
| --success: #3fb950; | |
| --warning: #d29922; | |
| --danger: #f85149; | |
| --border: #30363d; | |
| } | |
| * { box-sizing: border-box; } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, | |
| Ubuntu, sans-serif; | |
| background: var(--bg); | |
| color: var(--fg); | |
| margin: 0; | |
| padding: 0; | |
| line-height: 1.6; | |
| } | |
| header { | |
| text-align: center; | |
| padding: 2rem 1rem 1rem; | |
| border-bottom: 1px solid var(--border); | |
| position: relative; | |
| } | |
| header h1 { margin: 0 0 0.5rem 0; font-size: 2rem; } | |
| /* Language switcher (top-right) — round flags */ | |
| .lang-switcher { | |
| position: absolute; | |
| top: 1rem; right: 1rem; | |
| display: flex; gap: 0.4rem; | |
| z-index: 50; | |
| } | |
| .lang-btn { | |
| background: var(--bg-input); | |
| border: 2px solid var(--border); | |
| color: var(--fg); | |
| border-radius: 50%; | |
| width: 36px; height: 36px; | |
| padding: 0; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.1rem; | |
| cursor: pointer; | |
| line-height: 1; | |
| transition: all 0.2s ease; | |
| position: relative; | |
| } | |
| .lang-btn:hover { | |
| border-color: var(--accent); | |
| transform: scale(1.1); | |
| } | |
| .lang-btn.lang-active { | |
| border-color: var(--accent); | |
| background: var(--accent-dim); | |
| box-shadow: 0 0 12px rgba(88, 166, 255, 0.4); | |
| } | |
| .lang-btn::after { | |
| content: attr(data-label); | |
| position: absolute; | |
| top: 100%; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| margin-top: 4px; | |
| font-size: 0.65rem; | |
| color: var(--fg-dim); | |
| opacity: 0; | |
| transition: opacity 0.15s; | |
| white-space: nowrap; | |
| pointer-events: none; | |
| } | |
| .lang-btn:hover::after { opacity: 1; } | |
| /* Quickstart banner */ | |
| .quickstart-banner { | |
| background: rgba(63, 185, 80, 0.08); | |
| border-left: 3px solid var(--success); | |
| border-radius: 4px; | |
| padding: 0.75rem 1rem; | |
| margin-bottom: 1rem; | |
| font-size: 0.95rem; | |
| line-height: 1.5; | |
| } | |
| .quickstart-banner a { | |
| color: var(--accent); | |
| text-decoration: none; | |
| } | |
| .quickstart-banner a:hover { text-decoration: underline; } | |
| @media (max-width: 600px) { | |
| .lang-switcher { position: static; justify-content: center; margin-bottom: 0.5rem; } | |
| header { padding: 1rem 0.5rem; } | |
| } | |
| .tagline { font-size: 1.1rem; margin: 0 0 0.5rem; } | |
| .subtle { color: var(--fg-dim); font-size: 0.9rem; } | |
| main { | |
| max-width: 980px; | |
| margin: 0 auto; | |
| padding: 1.5rem; | |
| } | |
| section { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: 8px; | |
| padding: 1.25rem 1.5rem; | |
| margin-bottom: 1.25rem; | |
| } | |
| h2 { margin-top: 0; font-size: 1.2rem; color: var(--accent); } | |
| #status-bar { padding: 0.75rem 1.25rem; } | |
| #status { font-family: monospace; margin-bottom: 0.4rem; } | |
| /* Loading progress bar */ | |
| #loading-bar-wrap { | |
| height: 6px; | |
| background: var(--bg-input); | |
| border-radius: 3px; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| #loading-bar { | |
| height: 100%; | |
| background: linear-gradient(90deg, var(--accent-dim), var(--accent), var(--accent-dim)); | |
| background-size: 200% 100%; | |
| width: 0%; | |
| transition: width 0.3s ease-out; | |
| border-radius: 3px; | |
| animation: loading-shimmer 1.5s linear infinite; | |
| } | |
| @keyframes loading-shimmer { | |
| 0% { background-position: 200% 0; } | |
| 100% { background-position: -200% 0; } | |
| } | |
| #loading-bar.indeterminate { | |
| width: 100%; | |
| background: linear-gradient(90deg, | |
| var(--bg-input) 0%, var(--accent) 50%, var(--bg-input) 100%); | |
| background-size: 50% 100%; | |
| background-repeat: no-repeat; | |
| animation: loading-indeterminate 1.5s linear infinite; | |
| } | |
| @keyframes loading-indeterminate { | |
| 0% { background-position: -50% 0; } | |
| 100% { background-position: 150% 0; } | |
| } | |
| .recipe-desc { color: var(--fg-dim); margin: 0.5rem 0 0 0; } | |
| .form-row { display: flex; gap: 1rem; margin-bottom: 1rem; align-items: center; } | |
| .form-row label { min-width: 120px; } | |
| .form-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); | |
| gap: 0.75rem; | |
| margin-bottom: 1rem; | |
| } | |
| .form-field { display: flex; flex-direction: column; } | |
| .form-field label { font-size: 0.85rem; color: var(--fg-dim); margin-bottom: 0.25rem; } | |
| input, select { | |
| background: var(--bg-input); | |
| color: var(--fg); | |
| border: 1px solid var(--border); | |
| border-radius: 4px; | |
| padding: 0.4rem 0.6rem; | |
| font-family: monospace; | |
| font-size: 0.95rem; | |
| } | |
| input:focus, select:focus { outline: 1px solid var(--accent); border-color: var(--accent); } | |
| button { | |
| background: var(--accent-dim); | |
| color: white; | |
| border: none; | |
| padding: 0.6rem 1.2rem; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| transition: background 0.2s; | |
| } | |
| button:hover:not(:disabled) { background: var(--accent); } | |
| button:disabled { background: #444; cursor: not-allowed; } | |
| #verdict-box { | |
| font-size: 1.05rem; | |
| padding: 1rem; | |
| border-radius: 6px; | |
| border-left: 4px solid; | |
| } | |
| .verdict-yes { border-color: var(--success); background: rgba(63, 185, 80, 0.08); } | |
| .verdict-no { border-color: var(--danger); background: rgba(248, 81, 73, 0.08); } | |
| .verdict-degraded { border-color: var(--warning); background: rgba(210, 153, 34, 0.08); } | |
| .chain-step { | |
| background: var(--bg-input); | |
| border: 1px solid var(--border); | |
| border-radius: 6px; | |
| padding: 0.75rem 1rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .chain-step summary { | |
| display: flex; | |
| justify-content: space-between; | |
| font-weight: 600; | |
| cursor: pointer; | |
| list-style: none; | |
| } | |
| .chain-step summary::before { content: "▸ "; color: var(--accent); } | |
| .chain-step[open] summary::before { content: "▾ "; } | |
| .step-section { color: var(--accent); font-family: monospace; font-size: 0.9rem; } | |
| .step-formula { color: var(--fg-dim); font-family: monospace; font-size: 0.85rem; margin: 0.5rem 0; } | |
| .step-result { color: var(--success); font-family: monospace; font-weight: 600; margin-top: 0.25rem; } | |
| .step-interp { color: var(--fg-dim); font-size: 0.9rem; margin-top: 0.25rem; } | |
| .step-result pre { background: var(--bg); padding: 0.5rem; border-radius: 4px; overflow-x: auto; } | |
| .recipe-tag { | |
| background: var(--bg-input); | |
| color: var(--accent); | |
| font-family: monospace; | |
| font-size: 0.85rem; | |
| padding: 0.2rem 0.5rem; | |
| border-radius: 4px; | |
| } | |
| /* ─── Info icon + tooltip system ─── */ | |
| .info { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 16px; height: 16px; | |
| border-radius: 50%; | |
| background: var(--bg-input); | |
| color: var(--accent); | |
| border: 1px solid var(--border); | |
| font-size: 11px; | |
| font-style: italic; | |
| font-family: serif; | |
| cursor: help; | |
| margin-left: 0.3rem; | |
| position: relative; | |
| user-select: none; | |
| } | |
| .info:hover { border-color: var(--accent); background: var(--accent-dim); color: white; } | |
| .info::before { content: "i"; } | |
| .tooltip { | |
| visibility: hidden; | |
| opacity: 0; | |
| transition: opacity 0.15s, visibility 0.15s; | |
| position: absolute; | |
| bottom: calc(100% + 8px); | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background: #1a1f29; | |
| color: var(--fg); | |
| border: 1px solid var(--accent); | |
| border-radius: 6px; | |
| padding: 0.6rem 0.8rem; | |
| font-size: 0.85rem; | |
| font-family: -apple-system, BlinkMacSystemFont, sans-serif; | |
| font-style: normal; | |
| width: 280px; | |
| z-index: 100; | |
| text-align: left; | |
| line-height: 1.5; | |
| box-shadow: 0 4px 16px rgba(0,0,0,0.4); | |
| pointer-events: none; | |
| } | |
| .tooltip strong { color: var(--accent); } | |
| .tooltip code { | |
| background: var(--bg); | |
| padding: 0.1rem 0.3rem; | |
| border-radius: 3px; | |
| font-family: monospace; | |
| font-size: 0.85em; | |
| } | |
| .info:hover .tooltip { visibility: visible; opacity: 1; } | |
| .tooltip::after { | |
| content: ""; | |
| position: absolute; | |
| top: 100%; left: 50%; | |
| margin-left: -6px; | |
| border-width: 6px; | |
| border-style: solid; | |
| border-color: var(--accent) transparent transparent transparent; | |
| } | |
| /* Make verdict box more prominent */ | |
| #verdict-box { | |
| font-size: 1.1rem; | |
| padding: 1.5rem; | |
| border-radius: 8px; | |
| border-left: 6px solid; | |
| margin-bottom: 1rem; | |
| min-height: 80px; | |
| } | |
| .verdict-yes { background: rgba(63, 185, 80, 0.15); border-color: var(--success); } | |
| .verdict-no { background: rgba(248, 81, 73, 0.15); border-color: var(--danger); } | |
| .verdict-degraded { background: rgba(210, 153, 34, 0.15); border-color: var(--warning); } | |
| /* Help modal */ | |
| #help-btn { | |
| background: transparent; color: var(--accent); | |
| border: 1px solid var(--accent); border-radius: 6px; | |
| padding: 0.3rem 0.7rem; font-size: 0.85rem; | |
| } | |
| #help-btn:hover { background: var(--accent); color: white; } | |
| /* Modals (help / quickstart / inventory) share the same overlay + content frame */ | |
| #help-modal, | |
| #quickstart-modal, | |
| #inventory-modal { | |
| display: none; position: fixed; inset: 0; | |
| background: rgba(0,0,0,0.7); z-index: 1000; | |
| padding: 2rem; overflow-y: auto; | |
| } | |
| #help-modal.open, | |
| #quickstart-modal.open, | |
| #inventory-modal.open { display: flex; align-items: flex-start; justify-content: center; } | |
| .hero-buttons { | |
| margin-top: 0.6rem; | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.5rem; | |
| justify-content: center; | |
| } | |
| .hero-buttons button { white-space: nowrap; } | |
| .help-content { | |
| background: var(--bg-card); color: var(--fg); | |
| max-width: 800px; width: 100%; | |
| border: 1px solid var(--accent); border-radius: 12px; | |
| padding: 2rem; position: relative; | |
| } | |
| .help-close { | |
| position: absolute; top: 1rem; right: 1rem; | |
| background: var(--bg-input); border: 1px solid var(--border); | |
| color: var(--fg); border-radius: 50%; | |
| width: 32px; height: 32px; cursor: pointer; font-size: 1.2rem; | |
| } | |
| .help-content h3 { color: var(--accent); margin-top: 1.5rem; } | |
| .help-content code { | |
| background: var(--bg-input); padding: 0.1rem 0.4rem; | |
| border-radius: 3px; font-family: monospace; | |
| } | |
| .help-example { | |
| background: var(--bg-input); border-left: 3px solid var(--accent); | |
| padding: 0.75rem 1rem; margin: 0.5rem 0; border-radius: 4px; | |
| } | |
| .mode-tabs { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; flex-wrap: wrap; } | |
| .mode-btn { | |
| background: var(--bg-input); color: var(--fg-dim); | |
| border: 1px solid var(--border); border-radius: 6px; | |
| padding: 0.5rem 1rem; cursor: pointer; font-size: 0.95rem; | |
| } | |
| .mode-btn.active { background: var(--accent-dim); color: white; border-color: var(--accent); } | |
| button.secondary { | |
| background: var(--bg-input); color: var(--fg); | |
| border: 1px solid var(--border); padding: 0.4rem 0.8rem; | |
| } | |
| button.secondary:hover:not(:disabled) { border-color: var(--accent); } | |
| textarea { | |
| width: 100%; min-height: 60px; | |
| background: var(--bg-input); color: var(--fg); | |
| border: 1px solid var(--border); border-radius: 4px; | |
| padding: 0.5rem; font-family: inherit; font-size: 0.95rem; resize: vertical; | |
| } | |
| textarea:focus { outline: 1px solid var(--accent); border-color: var(--accent); } | |
| @media (max-width: 600px) { | |
| .form-grid { grid-template-columns: 1fr; } | |
| main { padding: 0.75rem; } | |
| .form-row { flex-direction: column; align-items: stretch; } | |
| .form-row label { min-width: auto; } | |
| .arch-badges { justify-content: flex-start; } | |
| } | |
| /* ─── Architecture coverage badges (hero) ─── */ | |
| .arch-badges { | |
| display: flex; flex-wrap: wrap; gap: 0.4rem; | |
| justify-content: center; margin-top: 0.75rem; | |
| } | |
| .badge { | |
| background: var(--bg-input); color: var(--success); | |
| border: 1px solid var(--border); padding: 0.2rem 0.5rem; | |
| border-radius: 4px; font-size: 0.85rem; font-family: monospace; | |
| } | |
| /* ─── Profile (TAF Card) ─── */ | |
| .taf-card { | |
| background: var(--bg-input); | |
| border: 1px solid var(--accent); | |
| border-radius: 8px; | |
| padding: 1.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| .taf-card h3 { color: var(--accent); margin-top: 1rem; margin-bottom: 0.5rem; } | |
| .taf-card-summary { | |
| background: var(--bg); | |
| padding: 0.75rem 1rem; | |
| border-radius: 6px; | |
| border-left: 4px solid var(--accent); | |
| margin-bottom: 1rem; | |
| } | |
| .taf-recipes-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); | |
| gap: 0.75rem; | |
| } | |
| .taf-recipe-tile { | |
| background: var(--bg); | |
| border: 1px solid var(--border); | |
| border-radius: 6px; | |
| padding: 0.75rem 1rem; | |
| border-left: 4px solid var(--fg-dim); | |
| } | |
| .taf-recipe-tile.v-yes { border-left-color: var(--success); } | |
| .taf-recipe-tile.v-no { border-left-color: var(--danger); } | |
| .taf-recipe-tile.v-deg { border-left-color: var(--warning); } | |
| .taf-recipe-tile .tile-header { | |
| display:flex; justify-content: space-between; align-items: center; | |
| font-weight: 600; margin-bottom: 0.25rem; | |
| } | |
| .taf-recipe-tile .tile-name { color: var(--fg-dim); font-size: 0.9rem; } | |
| .taf-recipe-tile .tile-verdict { font-weight: 700; } | |
| .taf-recipe-tile.v-yes .tile-verdict { color: var(--success); } | |
| .taf-recipe-tile.v-no .tile-verdict { color: var(--danger); } | |
| .taf-recipe-tile.v-deg .tile-verdict { color: var(--warning); } | |
| .taf-recipe-tile .tile-reason { font-size: 0.85rem; color: var(--fg); } | |
| .taf-key-numbers { font-family: monospace; font-size: 0.9rem; } | |
| .taf-key-numbers .num-row { | |
| display: flex; justify-content: space-between; | |
| padding: 0.2rem 0; border-bottom: 1px solid var(--border); | |
| } | |
| .taf-key-numbers .num-label { color: var(--fg-dim); } | |
| .taf-key-numbers .num-value { color: var(--success); font-weight: 600; } | |
| .taf-falsification { | |
| font-size: 0.85rem; padding: 0.5rem 0.75rem; | |
| background: var(--bg); border-radius: 4px; | |
| border-left: 3px solid var(--accent); | |
| margin-top: 0.5rem; | |
| } | |
| /* ─── Compare table ─── */ | |
| .compare-table { | |
| width: 100%; border-collapse: collapse; | |
| margin-top: 0.5rem; font-size: 0.95rem; | |
| } | |
| .compare-table th, .compare-table td { | |
| padding: 0.6rem 0.8rem; | |
| border: 1px solid var(--border); | |
| text-align: left; | |
| } | |
| .compare-table th { | |
| background: var(--bg-input); color: var(--accent); | |
| font-family: monospace; | |
| } | |
| .compare-table td.v-yes { background: rgba(63, 185, 80, 0.12); color: var(--success); font-weight: 600; } | |
| .compare-table td.v-no { background: rgba(248, 81, 73, 0.12); color: var(--danger); font-weight: 600; } | |
| .compare-table td.v-deg { background: rgba(210, 153, 34, 0.12); color: var(--warning); font-weight: 600; } | |
| .compare-slot { | |
| display: flex; gap: 0.5rem; margin: 0.5rem 0; align-items: center; | |
| } | |
| .compare-slot input { flex: 2; } | |
| .compare-slot select { flex: 1; min-width: 200px; } | |
| /* Share bar (download / share / submit / etc.) */ | |
| .share-bar { | |
| display: flex; gap: 0.5rem; margin: 0.75rem 0; | |
| flex-wrap: wrap; align-items: center; | |
| } | |
| .share-bar .subtle { margin-left: 0.5rem; } | |
| #import-section { | |
| background: rgba(88, 166, 255, 0.05); | |
| border: 1px dashed var(--accent); | |
| } | |
| #community-section { | |
| background: rgba(63, 185, 80, 0.05); | |
| border: 1px dashed var(--success); | |
| } | |
| #falsification-section { | |
| background: rgba(210, 153, 34, 0.04); | |
| border: 1px dashed var(--warning); | |
| } | |
| .community-item { | |
| background: var(--bg-input); | |
| border-radius: 4px; | |
| padding: 0.5rem 0.75rem; | |
| margin: 0.25rem 0; | |
| display: flex; gap: 0.5rem; align-items: center; | |
| font-size: 0.9rem; | |
| } | |
| .community-item a { color: var(--accent); text-decoration: none; } | |
| .community-item a:hover { text-decoration: underline; } | |
| .community-item .verdict-badge { | |
| font-family: monospace; padding: 0.1rem 0.4rem; border-radius: 3px; | |
| font-weight: 700; font-size: 0.8rem; | |
| } | |
| .community-item .verdict-badge.yes { background: rgba(63, 185, 80, 0.2); color: var(--success); } | |
| .community-item .verdict-badge.no { background: rgba(248, 81, 73, 0.2); color: var(--danger); } | |
| .community-item .verdict-badge.deg { background: rgba(210, 153, 34, 0.2); color: var(--warning); } | |
| .community-item .item-time { color: var(--fg-dim); font-size: 0.8rem; margin-left: auto; } | |
| .falsification-table { | |
| width: 100%; border-collapse: collapse; font-size: 0.88rem; | |
| } | |
| .falsification-table th, .falsification-table td { | |
| padding: 0.4rem 0.6rem; | |
| border-bottom: 1px solid var(--border); | |
| text-align: left; | |
| } | |
| .falsification-table th { | |
| background: var(--bg-input); color: var(--accent); | |
| font-family: monospace; font-size: 0.85rem; | |
| } | |
| .fal-status { font-weight: 700; } | |
| .fal-status.confirmed { color: var(--success); } | |
| .fal-status.partial { color: var(--warning); } | |
| .fal-status.refuted { color: var(--danger); } | |
| .fal-status.untested { color: var(--fg-dim); } | |
| /* What-if slider in profile output */ | |
| .whatif-box { | |
| background: var(--bg-input); | |
| border-left: 4px solid var(--accent); | |
| border-radius: 6px; | |
| padding: 1rem 1.25rem; | |
| margin: 1rem 0; | |
| } | |
| .whatif-box h3 { margin-top: 0; color: var(--accent); } | |
| .whatif-slider { | |
| width: 100%; margin: 0.5rem 0; | |
| accent-color: var(--accent); | |
| } | |
| .whatif-row { | |
| display: flex; justify-content: space-between; | |
| font-family: monospace; font-size: 0.95rem; | |
| padding: 0.2rem 0; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .whatif-row strong { color: var(--accent); } | |
| .whatif-row .verdict-text { font-weight: 700; } | |
| .whatif-row .verdict-text.yes { color: var(--success); } | |
| .whatif-row .verdict-text.no { color: var(--danger); } | |
| .whatif-row .verdict-text.deg { color: var(--warning); } | |
| /* Inspector textarea */ | |
| #inspector-json { | |
| font-family: 'Consolas', 'Monaco', monospace; | |
| font-size: 0.85rem; | |
| background: var(--bg-input); | |
| color: var(--fg); | |
| border: 1px solid var(--border); | |
| border-radius: 4px; | |
| padding: 0.75rem; | |
| width: 100%; | |
| resize: vertical; | |
| } | |
| #inspector-json:focus { outline: 1px solid var(--accent); border-color: var(--accent); } | |
| footer { | |
| text-align: center; | |
| padding: 1.5rem; | |
| color: var(--fg-dim); | |
| font-size: 0.85rem; | |
| border-top: 1px solid var(--border); | |
| margin-top: 2rem; | |
| } | |
| footer a { color: var(--accent); text-decoration: none; } | |
| footer a:hover { text-decoration: underline; } | |
| /* Diagnose mode CLI command box */ | |
| .diag-cmd-box { | |
| background: #0a0e14; | |
| color: #e6f1ff; | |
| border: 1px solid var(--border); | |
| border-radius: 6px; | |
| padding: 1em; | |
| font-family: 'Courier New', monospace; | |
| font-size: 0.92em; | |
| white-space: pre-wrap; | |
| word-break: break-all; | |
| margin: 0.6em 0; | |
| overflow-x: auto; | |
| } | |
| /* ─── TAF Card accordion sections (v0.6 — UX restructuring) ─── */ | |
| .taf-section { | |
| margin: 0.7em 0; | |
| border: 1px solid var(--border); | |
| border-radius: 6px; | |
| background: rgba(255,255,255,0.018); | |
| overflow: hidden; | |
| } | |
| .taf-section > summary { | |
| cursor: pointer; | |
| list-style: none; | |
| padding: 0.7em 0.95em; | |
| font-weight: 600; | |
| font-size: 1.02em; | |
| user-select: none; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5em; | |
| transition: background 0.12s; | |
| } | |
| .taf-section > summary:hover { background: rgba(255,255,255,0.04); } | |
| .taf-section > summary::-webkit-details-marker { display: none; } | |
| .taf-section > summary::before { | |
| content: "▶"; | |
| display: inline-block; | |
| font-size: 0.7em; | |
| color: var(--fg-dim); | |
| transition: transform 0.15s ease; | |
| width: 0.8em; | |
| text-align: center; | |
| } | |
| .taf-section[open] > summary::before { transform: rotate(90deg); } | |
| .taf-section > summary .section-count { | |
| margin-left: auto; | |
| font-size: 0.82em; | |
| color: var(--fg-dim); | |
| font-weight: 500; | |
| } | |
| .taf-section-body { | |
| padding: 0.4em 1em 1em 1em; | |
| border-top: 1px solid var(--border); | |
| background: var(--bg); | |
| } | |
| /* Hero strip — always-visible top-line summary */ | |
| .taf-hero { | |
| padding: 0.9em 1em; | |
| border: 1px solid var(--border); | |
| border-radius: 6px; | |
| background: linear-gradient(135deg, rgba(110,80,200,0.06), rgba(255,255,255,0.02)); | |
| margin-bottom: 0.4em; | |
| } | |
| .taf-hero .hero-arch { font-size: 1.15rem; font-weight: 700; } | |
| .taf-hero .hero-meta { color: var(--fg-dim); font-size: 0.88em; margin-top: 0.25em; } | |
| .taf-hero .hero-row { | |
| display: flex; flex-wrap: wrap; gap: 0.5em 1em; | |
| align-items: center; margin-top: 0.5em; | |
| } | |
| .taf-hero .hero-pill { | |
| display: inline-flex; align-items: center; gap: 0.35em; | |
| padding: 0.2em 0.6em; border-radius: 999px; | |
| font-size: 0.85em; font-weight: 600; | |
| background: var(--bg-input); | |
| border: 1px solid var(--border); | |
| } | |
| .taf-hero .hero-pill.v-yes { color: var(--success); border-color: var(--success); } | |
| .taf-hero .hero-pill.v-no { color: var(--danger); border-color: var(--danger); } | |
| .taf-hero .hero-pill.v-deg { color: var(--warning); border-color: var(--warning); } | |
| /* ─── Lean+Mathlib provenance (v0.6) ─── */ | |
| .lean-badge { | |
| display: inline-block; | |
| padding: 0.08em 0.45em; | |
| margin: 0 0.15em; | |
| border: 1px solid rgba(110,80,200,0.45); | |
| background: rgba(110,80,200,0.10); | |
| border-radius: 4px; | |
| color: var(--accent, #b48cff); | |
| text-decoration: none; | |
| font-size: 0.78em; | |
| font-family: monospace; | |
| vertical-align: middle; | |
| white-space: nowrap; | |
| } | |
| .lean-badge:hover { | |
| background: rgba(110,80,200,0.22); | |
| text-decoration: none; | |
| } | |
| .lean-badges-row { | |
| margin: 0.4em 0 0.6em; | |
| line-height: 1.9; | |
| } | |
| .lean-meta { | |
| font-size: 0.88em; | |
| margin-bottom: 0.6em; | |
| padding: 0.5em 0.7em; | |
| background: rgba(255,255,255,0.02); | |
| border-left: 3px solid var(--accent); | |
| border-radius: 4px; | |
| } | |
| .lean-meta a { color: var(--accent); } | |
| .lean-findings { | |
| margin: 0.6em 0 0.8em; | |
| padding: 0.5em 0.7em; | |
| border: 1px solid rgba(241,196,15,0.4); | |
| background: rgba(241,196,15,0.06); | |
| border-radius: 6px; | |
| } | |
| .lean-findings > summary { | |
| cursor: pointer; | |
| font-size: 1em; | |
| } | |
| .lean-finding { | |
| margin: 0.6em 0; | |
| padding: 0.6em 0.7em; | |
| border-left: 3px solid var(--warning); | |
| background: rgba(255,255,255,0.025); | |
| border-radius: 0 4px 4px 0; | |
| } | |
| .lean-pill { | |
| display: inline-block; | |
| margin-left: 0.4em; | |
| padding: 0.05em 0.45em; | |
| font-size: 0.75em; | |
| border-radius: 999px; | |
| border: 1px solid var(--border); | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| } | |
| .lean-pill.v-deg { color: var(--warning); border-color: var(--warning); } | |
| .lean-groups .lean-group { | |
| margin: 0.4em 0; | |
| border: 1px solid var(--border); | |
| border-radius: 4px; | |
| background: var(--bg); | |
| } | |
| .lean-group > summary { | |
| cursor: pointer; | |
| padding: 0.5em 0.7em; | |
| user-select: none; | |
| font-weight: 600; | |
| list-style: none; | |
| } | |
| .lean-group > summary::-webkit-details-marker { display: none; } | |
| .lean-group > summary::before { | |
| content: "▶ "; | |
| font-size: 0.7em; | |
| color: var(--fg-dim); | |
| transition: transform 0.15s; | |
| } | |
| .lean-group[open] > summary::before { | |
| content: "▼ "; | |
| } | |
| .lean-table-wrap { | |
| max-height: 380px; | |
| overflow: auto; | |
| border-top: 1px solid var(--border); | |
| } | |
| .lean-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 0.85em; | |
| } | |
| .lean-table th, .lean-table td { | |
| padding: 0.4em 0.6em; | |
| text-align: left; | |
| vertical-align: top; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .lean-table th { | |
| position: sticky; | |
| top: 0; | |
| background: var(--bg-input); | |
| color: var(--accent); | |
| font-family: monospace; | |
| z-index: 1; | |
| } | |
| .lean-table tbody tr:hover { background: rgba(255,255,255,0.03); } | |
| .lean-table code { font-size: 0.95em; } | |