@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap'); *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} :root { --bg: oklch(0.11 0.022 148); --surface: oklch(0.145 0.020 148); --raised: oklch(0.175 0.018 148); --input: oklch(0.085 0.015 148); --fg: oklch(0.82 0.090 148); /* was 0.76 — main body text, slightly brighter */ --fg-hi: oklch(0.93 0.070 148); /* was 0.90 — headings */ --fg-dim: oklch(0.70 0.075 148); /* was 0.54 — was the biggest issue, now reads cleanly */ --fg-mute: oklch(0.58 0.060 148); /* was 0.34 — metadata/hints, now actually visible */ --border: oklch(0.28 0.045 148); /* was 0.21 — also bumped for card edges */ --border-hi: oklch(0.38 0.060 148); /* was 0.30 */ --green: oklch(0.87 0.260 148); --green-bg: oklch(0.18 0.065 148); --amber: oklch(0.82 0.140 80); --amber-bg: oklch(0.18 0.055 80); --red: oklch(0.65 0.200 25); --red-bg: oklch(0.18 0.070 25); --cyan: oklch(0.80 0.100 200); --cyan-bg: oklch(0.18 0.040 200); --blue: oklch(0.72 0.120 245); --purple: oklch(0.72 0.120 295); --purple-bg: oklch(0.18 0.045 295); --d1: oklch(0.78 0.100 200); --d2: oklch(0.87 0.260 148); --d3: oklch(0.72 0.120 245); --d4: oklch(0.82 0.140 80); --d5: oklch(0.68 0.180 30); --d6: oklch(0.72 0.120 295); --font: 'JetBrains Mono', ui-monospace, 'Courier New', monospace; --r: 3px; --r-md: 5px; --r-lg: 8px; } /* ===== Theme overrides — applied via ===== * Default (green) is the :root values above. Each theme rotates the ENTIRE * palette to its primary hue H, not just the accent: * - Neutrals (bg/surface/raised/input/fg*, border*) are re-tinted to H using * the exact lightness + chroma of the green theme — only the hue changes. * Because perceptual contrast is governed by lightness (which is held * constant), every text/background pairing keeps the same contrast ratio * it has in the green theme, while the whole UI picks up the theme tint. * - The secondary/tertiary highlights (--cyan, --amber) are rotated by the * same hue delta (H − 148) so they stay harmonious with the new accent * instead of clashing as fixed green-era colors. * - --red / --red-bg are intentionally NOT rotated: red is the error/danger * semantic and must read as red in every theme. * Mono is a full grayscale palette (chroma 0) defined explicitly below. * The data-theme attribute is set by a tiny inline script in index.html * (before first paint) and re-set by window.ThemePicker (Profile → Appearance). */ html[data-theme="blue"] { /* H = 250 (Δ +102) */ --bg: oklch(0.11 0.022 250); --surface: oklch(0.145 0.020 250); --raised: oklch(0.175 0.018 250); --input: oklch(0.085 0.015 250); --fg: oklch(0.82 0.090 250); --fg-hi: oklch(0.93 0.070 250); --fg-dim: oklch(0.70 0.075 250); --fg-mute: oklch(0.58 0.060 250); --border: oklch(0.28 0.045 250); --border-hi: oklch(0.38 0.060 250); --green: oklch(0.78 0.180 250); --green-bg: oklch(0.18 0.060 250); --cyan: oklch(0.80 0.100 302); --cyan-bg: oklch(0.18 0.040 302); --amber: oklch(0.82 0.140 182); --amber-bg: oklch(0.18 0.055 182); } html[data-theme="orange"] { /* H = 55 (Δ −93) */ --bg: oklch(0.11 0.022 55); --surface: oklch(0.145 0.020 55); --raised: oklch(0.175 0.018 55); --input: oklch(0.085 0.015 55); --fg: oklch(0.82 0.090 55); --fg-hi: oklch(0.93 0.070 55); --fg-dim: oklch(0.70 0.075 55); --fg-mute: oklch(0.58 0.060 55); --border: oklch(0.28 0.045 55); --border-hi: oklch(0.38 0.060 55); --green: oklch(0.80 0.180 55); --green-bg: oklch(0.18 0.060 55); --cyan: oklch(0.80 0.100 107); --cyan-bg: oklch(0.18 0.040 107); --amber: oklch(0.82 0.140 347); --amber-bg: oklch(0.18 0.055 347); } html[data-theme="red"] { /* H = 25 (Δ −123) */ --bg: oklch(0.11 0.022 25); --surface: oklch(0.145 0.020 25); --raised: oklch(0.175 0.018 25); --input: oklch(0.085 0.015 25); --fg: oklch(0.82 0.090 25); --fg-hi: oklch(0.93 0.070 25); --fg-dim: oklch(0.70 0.075 25); --fg-mute: oklch(0.58 0.060 25); --border: oklch(0.28 0.045 25); --border-hi: oklch(0.38 0.060 25); --green: oklch(0.72 0.220 25); --green-bg: oklch(0.18 0.080 25); --cyan: oklch(0.80 0.100 77); --cyan-bg: oklch(0.18 0.040 77); --amber: oklch(0.82 0.140 317); --amber-bg: oklch(0.18 0.055 317); } html[data-theme="purple"] { /* H = 300 (Δ +152) */ --bg: oklch(0.11 0.022 300); --surface: oklch(0.145 0.020 300); --raised: oklch(0.175 0.018 300); --input: oklch(0.085 0.015 300); --fg: oklch(0.82 0.090 300); --fg-hi: oklch(0.93 0.070 300); --fg-dim: oklch(0.70 0.075 300); --fg-mute: oklch(0.58 0.060 300); --border: oklch(0.28 0.045 300); --border-hi: oklch(0.38 0.060 300); --green: oklch(0.72 0.200 300); --green-bg: oklch(0.18 0.070 300); --cyan: oklch(0.80 0.100 352); --cyan-bg: oklch(0.18 0.040 352); --amber: oklch(0.82 0.140 232); --amber-bg: oklch(0.18 0.055 232); } html[data-theme="mono"] { --bg: oklch(0.05 0 0); --surface: oklch(0.13 0 0); --raised: oklch(0.17 0 0); --input: oklch(0.08 0 0); --border: oklch(0.30 0 0); --border-hi: oklch(0.45 0 0); --fg: oklch(0.88 0 0); --fg-hi: oklch(0.98 0 0); --fg-dim: oklch(0.68 0 0); --fg-mute: oklch(0.48 0 0); --green: oklch(0.95 0 0); --green-bg: oklch(0.22 0 0); --cyan: oklch(0.78 0 0); --cyan-bg: oklch(0.20 0 0); --amber: oklch(0.85 0 0); --amber-bg: oklch(0.20 0 0); --red: oklch(0.65 0 0); --red-bg: oklch(0.20 0 0); } html,body { height:100%; background:var(--bg); color:var(--fg); font-family:var(--font); font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; transition: background-color 180ms ease, color 180ms ease; } /* Prevent horizontal overflow from forcing Chrome on Android to widen * the viewport. Without this, any single element wider than the screen * causes Chrome to report a larger innerWidth (e.g. 685px on a 411px * device), which then prevents @media (max-width: 600px) from firing. * * overflow-x:hidden is applied to html only (not body) to avoid breaking * the sticky topbar — putting overflow on body would create a new scroll * context and detach position:sticky from window scroll. */ html { overflow-x: clip; } body { max-width: 100vw; } /* Let flex containers shrink their children. Without min-width: 0 on * flex items, children refuse to shrink below their content width. */ .topbar { min-width: 0; } .topbar > * { min-width: 0; } .nav-tabs { min-width: 0; flex-shrink: 1; } /* ===== LAYOUT ===== */ .app { display:grid; grid-template-rows:auto 1fr auto; min-height:100vh; } /* Site-wide footer (Privacy / Terms). Sits at the bottom of the .app grid * on routed pages. The chooser screen renders without .app so it doesn't * get this footer — that's intentional, the chooser is full-bleed. */ .app-footer { padding: 16px 20px; text-align: center; border-top: 1px solid var(--border); font-size: 12px; color: var(--fg-mute); background: var(--bg); } .app-footer a { color: var(--fg-dim); text-decoration: none; padding: 4px 10px; transition: color 120ms; } .app-footer a:hover { color: var(--green); } .app-footer .footer-sep { color: var(--fg-mute); margin: 0 2px; } .topbar { display:flex; align-items:center; gap:16px; padding:9px 22px; border-bottom:1px solid var(--border); background:var(--surface); position:sticky; top:0; z-index:40; font-size:12px; /* Hard guard: never exceed viewport. Combined with min-width:0 on flex * children (above), this catches any rigid-width child that wants to * push the topbar past the screen edge. * * NOTE: we used to set overflow:hidden here as a second guard, but that * CLIPPED the .user-menu dropdown (a child element). overflow:hidden on * a parent clips all absolutely-positioned descendants regardless of * z-index. min-width:0 on the topbar + its children is enough to keep * the topbar within viewport; we don't need overflow:hidden too. */ max-width: 100vw; } /* Brand wrapper: flex container holding the (clickable) prompt, the cd .. * button, and the cursor. Keeps everything on one line and the cursor at * the end. */ .brand-wrap { display:flex; align-items:center; gap:0; white-space:nowrap; min-width:0; flex-shrink:1; overflow:hidden; } .brand { display:flex; align-items:center; gap:0; color:var(--fg-hi); font-weight:700; letter-spacing:0.04em; background:transparent; border:0; padding:0; font:inherit; font-size:22px; cursor:pointer; white-space:nowrap; } .brand:hover .b-user, .brand:hover .b-host, .brand:hover .b-path { filter:brightness(1.15); } /* Root-level brand: not clickable. Drops the pointer cursor + hover effect * so the topbar prompt looks like a decoration, not a button. */ .brand.brand-noop { cursor: default; } .brand.brand-noop:hover .b-user, .brand.brand-noop:hover .b-host, .brand.brand-noop:hover .b-path { filter: none; } .brand .b-user { color:var(--green); } .brand .b-host { color:var(--green); } .brand .b-sep { color:var(--fg-hi); margin:0 1px; font-weight:700; } .brand .b-colon { color:var(--fg-hi); margin:0 1px; font-weight:700; } .brand .b-path { color:var(--cyan); transition: color 100ms; } .brand .b-dollar { color:var(--fg-hi); font-weight:700; margin-left:2px; } .brand-wrap .b-cursor { color:var(--green); animation:blink 1s step-end infinite; margin-left:4px; font-size:22px; line-height:1; } /* "cd .." appended to the prompt — visual indicator, not a separate button. * The whole .brand