Spaces:
Running
Running
| :root { | |
| --bg: #0a0e17; | |
| --bg-2: #0f1523; | |
| --card: #131a2b; | |
| --card-2: #182136; | |
| --border: #263149; | |
| --text: #e7ecf5; | |
| --muted: #93a0bd; | |
| --accent: #38e1c6; | |
| --accent-2: #ffd23f; | |
| --omega: #38e1c6; | |
| --L: #ffd23f; | |
| --w1: #ff6b6b; | |
| --w2: #4dabf7; | |
| --w3: #b197fc; | |
| --stable: #37d67a; | |
| --unstable: #ff6b6b; | |
| --shadow: 0 20px 60px rgba(0, 0, 0, 0.45); | |
| } | |
| * { box-sizing: border-box; } | |
| html { scroll-behavior: smooth; } | |
| body { | |
| margin: 0; | |
| font-family: "Inter", system-ui, -apple-system, sans-serif; | |
| background: radial-gradient(1200px 700px at 70% -10%, #16233f 0%, var(--bg) 55%); | |
| color: var(--text); | |
| line-height: 1.65; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| .mono { font-family: "JetBrains Mono", monospace; } | |
| /* ---------- Hero ---------- */ | |
| .hero { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 1.6rem 1.5rem 1rem; | |
| text-align: center; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hero::after { | |
| content: ""; | |
| position: absolute; | |
| inset: 0; | |
| background: | |
| radial-gradient(600px 300px at 20% 90%, rgba(56, 225, 198, 0.08), transparent), | |
| radial-gradient(500px 300px at 85% 20%, rgba(255, 210, 63, 0.07), transparent); | |
| pointer-events: none; | |
| } | |
| .hero-inner { max-width: 780px; position: relative; z-index: 1; } | |
| .credit { | |
| position: absolute; | |
| right: 1.5rem; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| z-index: 2; | |
| font-size: 0.8rem; | |
| color: var(--muted); | |
| letter-spacing: 0.02em; | |
| white-space: nowrap; | |
| } | |
| @media (max-width: 640px) { | |
| .credit { position: static; transform: none; display: block; margin-top: 0.5rem; } | |
| } | |
| .eyebrow { | |
| text-transform: uppercase; | |
| letter-spacing: 0.2em; | |
| font-size: 0.72rem; | |
| color: var(--accent); | |
| font-weight: 600; | |
| margin: 0 0 0.4rem; | |
| } | |
| .hero h1 { | |
| font-size: clamp(1.7rem, 4.2vw, 2.8rem); | |
| line-height: 1.1; | |
| white-space: nowrap; | |
| margin: 0; | |
| font-weight: 700; | |
| background: linear-gradient(120deg, #ffffff 20%, var(--accent) 60%, var(--accent-2) 100%); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .lede { font-size: 1.05rem; color: var(--muted); margin: 0 auto; max-width: 720px; } | |
| .lab-lede { margin-top: 1.4rem; text-align: center; } | |
| /* ---------- Lab ---------- */ | |
| .lab { max-width: 1240px; margin: 0 auto; padding: 1rem 1.5rem 3rem; } | |
| .lab-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 340px; | |
| gap: 1.25rem; | |
| align-items: start; | |
| position: relative; | |
| } | |
| .lab-grid.panel-closed { grid-template-columns: 1fr; } | |
| .lab-grid.panel-closed .panel { display: none; } | |
| @media (max-width: 900px) { | |
| .lab-grid { grid-template-columns: 1fr; } | |
| } | |
| .viewport-card, .panel, .graph-card { | |
| background: var(--card); | |
| border: 1px solid var(--border); | |
| border-radius: 18px; | |
| box-shadow: var(--shadow); | |
| } | |
| .viewport-card { overflow: hidden; } | |
| #viewport { | |
| position: relative; | |
| width: 100%; | |
| aspect-ratio: 16 / 10; | |
| max-height: 44vh; | |
| background: linear-gradient(180deg, #0c1322, #0a0e17); | |
| } | |
| #viewport canvas { display: block; width: 100% ; height: 100% ; } | |
| #loading { | |
| position: absolute; inset: 0; | |
| display: flex; align-items: center; justify-content: center; | |
| color: var(--muted); font-size: 0.95rem; | |
| } | |
| .viewport-hud { | |
| position: absolute; top: 12px; left: 14px; | |
| display: flex; flex-direction: column; gap: 4px; | |
| font-size: 0.8rem; color: var(--muted); | |
| pointer-events: none; | |
| } | |
| .viewport-hud span { display: flex; align-items: center; gap: 7px; } | |
| .dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; flex: none; } | |
| .dot-omega { background: var(--omega); } | |
| .dot-L { background: var(--L); } | |
| .dot-w1 { background: var(--w1); } | |
| .dot-w2 { background: var(--w2); } | |
| .dot-w3 { background: var(--w3); } | |
| .conserved-bar { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| border-top: 1px solid var(--border); | |
| } | |
| .conserved { | |
| padding: 0.85rem 1rem; | |
| border-right: 1px solid var(--border); | |
| } | |
| .conserved:last-child { border-right: none; } | |
| .conserved label { display: block; font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; } | |
| .conserved output { font-family: "JetBrains Mono", monospace; font-size: 1.15rem; font-weight: 500; color: var(--text); } | |
| /* ---------- Panel ---------- */ | |
| .panel { padding: 1.1rem 1.1rem 1.3rem; } | |
| .panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } | |
| .panel-head h2 { margin: 0; font-size: 1.15rem; } | |
| .control-block { margin-bottom: 1.4rem; } | |
| .block-title { display: block; font-size: 0.82rem; color: var(--muted); margin-bottom: 0.6rem; font-weight: 600; } | |
| /* icon + open/close buttons */ | |
| .icon-btn { | |
| border: 1px solid var(--border); | |
| background: var(--card-2); | |
| color: var(--muted); | |
| width: 30px; height: 30px; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| font-size: 0.85rem; | |
| line-height: 1; | |
| transition: all 0.15s ease; | |
| } | |
| .icon-btn:hover { color: var(--text); border-color: var(--accent); } | |
| .panel-open { | |
| position: absolute; | |
| top: 12px; right: 12px; | |
| z-index: 5; | |
| font-family: inherit; | |
| font-weight: 600; | |
| font-size: 0.85rem; | |
| padding: 0.5rem 0.9rem; | |
| border-radius: 10px; | |
| border: 1px solid var(--border); | |
| background: rgba(19, 26, 43, 0.9); | |
| backdrop-filter: blur(6px); | |
| color: var(--text); | |
| cursor: pointer; | |
| box-shadow: var(--shadow); | |
| transition: all 0.15s ease; | |
| } | |
| .panel-open:hover { border-color: var(--accent); color: var(--accent); } | |
| .panel-open[hidden] { display: none; } | |
| /* collapsible sections */ | |
| .section { | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| background: var(--card-2); | |
| margin-bottom: 0.7rem; | |
| overflow: hidden; | |
| } | |
| .section > summary { | |
| list-style: none; | |
| cursor: pointer; | |
| padding: 0.7rem 0.9rem; | |
| font-size: 0.9rem; | |
| font-weight: 600; | |
| color: var(--text); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| user-select: none; | |
| } | |
| .section > summary::-webkit-details-marker { display: none; } | |
| .section > summary::after { | |
| content: ""; | |
| width: 8px; height: 8px; | |
| border-right: 2px solid var(--muted); | |
| border-bottom: 2px solid var(--muted); | |
| transform: rotate(-45deg); | |
| transition: transform 0.2s ease; | |
| margin-right: 2px; | |
| } | |
| .section[open] > summary::after { transform: rotate(45deg); } | |
| .section > summary:hover { color: var(--accent); } | |
| .section > summary:hover::after { border-color: var(--accent); } | |
| .section-body { padding: 0 0.9rem 0.95rem; } | |
| .axis-buttons { display: grid; gap: 0.5rem; } | |
| .axis-buttons.two { grid-template-columns: 1fr 1fr; } | |
| .custom-axis { | |
| margin-top: 0.7rem; | |
| padding: 0.85rem 0.9rem 0.6rem; | |
| border: 1px dashed var(--border); | |
| border-radius: 10px; | |
| background: rgba(255, 255, 255, 0.015); | |
| } | |
| .custom-axis[hidden] { display: none; } | |
| .axis-buttons button { | |
| text-align: left; | |
| padding: 0.6rem 0.8rem; | |
| border-radius: 10px; | |
| border: 1px solid var(--border); | |
| background: var(--card-2); | |
| color: var(--text); | |
| cursor: pointer; | |
| transition: all 0.15s ease; | |
| display: flex; flex-direction: column; | |
| } | |
| .axis-buttons button b { font-size: 0.92rem; } | |
| .axis-buttons button small { color: var(--muted); font-size: 0.74rem; } | |
| .axis-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } | |
| .axis-status { | |
| font-size: 0.66rem; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| padding: 0.08rem 0.45rem; | |
| border-radius: 999px; | |
| } | |
| .axis-status.stable { background: rgba(55, 214, 122, 0.16); color: var(--stable); } | |
| .axis-status.unstable { background: rgba(255, 107, 107, 0.16); color: var(--unstable); } | |
| .axis-status.marginal { background: rgba(255, 210, 63, 0.16); color: var(--accent-2); } | |
| .axis-buttons button:hover { border-color: var(--accent); } | |
| .axis-buttons button.active { | |
| border-color: var(--accent); | |
| background: linear-gradient(180deg, rgba(56, 225, 198, 0.14), rgba(56, 225, 198, 0.04)); | |
| box-shadow: inset 0 0 0 1px rgba(56, 225, 198, 0.3); | |
| } | |
| .slider-label { | |
| display: flex; justify-content: space-between; | |
| font-size: 0.85rem; margin-bottom: 0.35rem; color: var(--text); | |
| } | |
| .slider-label span { color: var(--accent); font-family: "JetBrains Mono", monospace; } | |
| input[type="range"] { | |
| -webkit-appearance: none; appearance: none; | |
| width: 100%; height: 5px; border-radius: 4px; | |
| background: var(--border); outline: none; margin: 0 0 0.4rem; | |
| } | |
| input[type="range"]::-webkit-slider-thumb { | |
| -webkit-appearance: none; appearance: none; | |
| width: 17px; height: 17px; border-radius: 50%; | |
| background: var(--accent); cursor: pointer; | |
| border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--accent); | |
| } | |
| input[type="range"]::-moz-range-thumb { | |
| width: 15px; height: 15px; border-radius: 50%; | |
| background: var(--accent); cursor: pointer; border: 3px solid var(--bg); | |
| } | |
| .hint { font-size: 0.76rem; color: var(--muted); margin: 0.4rem 0 0; line-height: 1.5; } | |
| #orderHint { font-family: "JetBrains Mono", monospace; } | |
| .button-row { display: flex; gap: 0.6rem; margin-bottom: 1rem; } | |
| .button-row button, .axis-buttons button { font-family: inherit; } | |
| .button-row button { | |
| flex: 1; | |
| padding: 0.65rem; | |
| border-radius: 10px; | |
| border: 1px solid var(--border); | |
| background: var(--card-2); | |
| color: var(--text); | |
| cursor: pointer; | |
| font-weight: 600; | |
| transition: all 0.15s ease; | |
| } | |
| .button-row button:hover { border-color: var(--accent); } | |
| .button-row .primary { background: var(--accent); color: #04231e; border-color: var(--accent); } | |
| .button-row .primary:hover { filter: brightness(1.08); } | |
| .toggle { display: flex; align-items: center; gap: 0.55rem; font-size: 0.85rem; color: var(--muted); cursor: pointer; } | |
| .toggle input { width: 16px; height: 16px; accent-color: var(--accent); } | |
| /* ---------- Graph ---------- */ | |
| .graph-card { margin-top: 0.9rem; padding: 0.9rem 1.1rem 1rem; } | |
| .graph-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; } | |
| .graph-head h3 { margin: 0; font-size: 1rem; } | |
| .graph-controls { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; } | |
| .legend { display: flex; gap: 1rem; font-size: 0.82rem; color: var(--muted); } | |
| .legend span { display: flex; align-items: center; gap: 6px; } | |
| .seg { | |
| display: inline-flex; | |
| background: var(--card-2); | |
| border: 1px solid var(--border); | |
| border-radius: 9px; | |
| padding: 3px; | |
| gap: 3px; | |
| } | |
| .seg button { | |
| font-family: inherit; | |
| font-size: 0.8rem; | |
| padding: 0.32rem 0.7rem; | |
| border: none; | |
| background: transparent; | |
| color: var(--muted); | |
| border-radius: 6px; | |
| cursor: pointer; | |
| transition: all 0.15s ease; | |
| } | |
| .seg button:hover { color: var(--text); } | |
| .seg button.active { background: var(--accent); color: #04231e; font-weight: 600; } | |
| #graph { width: 100%; height: 20vh; min-height: 130px; max-height: 220px; margin-top: 0.6rem; display: block; } | |
| .graph-caption { margin-top: 0.7rem; } | |
| .graph-caption h3 { margin: 0 0 0.3rem; font-size: 1rem; } | |
| .graph-caption .hint { margin-top: 0; } | |
| /* ---------- Prose ---------- */ | |
| .prose { max-width: 820px; margin: 3rem auto 5rem; padding: 0 1.5rem; } | |
| .prose section { margin-bottom: 3rem; } | |
| .prose h2 { | |
| font-size: 1.7rem; margin: 0 0 1rem; | |
| border-left: 3px solid var(--accent); padding-left: 0.8rem; | |
| } | |
| .prose h3 { font-size: 1.15rem; margin: 1.8rem 0 0.6rem; color: var(--accent); } | |
| .prose p, .prose li { color: #cdd6e8; } | |
| .prose strong { color: #fff; } | |
| .prose a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(56, 225, 198, 0.35); } | |
| .prose a:hover { border-bottom-color: var(--accent); } | |
| .prose ul, .prose ol { padding-left: 1.3rem; } | |
| .prose li { margin-bottom: 0.4rem; } | |
| .tag { font-size: 0.72rem; font-weight: 700; padding: 0.1rem 0.5rem; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.04em; } | |
| .tag.stable { background: rgba(55, 214, 122, 0.15); color: var(--stable); } | |
| .tag.unstable { background: rgba(255, 107, 107, 0.15); color: var(--unstable); } | |
| mjx-container { overflow-x: auto; overflow-y: hidden; max-width: 100%; } | |
| .prose-footer { border-top: 1px solid var(--border); padding-top: 1.5rem; } | |
| .prose-footer p { font-size: 0.88rem; color: var(--muted); } | |