/* Cross-theme primitives. Each theme overrides via its scoped root. */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: ui-sans-serif, system-ui, sans-serif; } /* Document-root background tracks the FG theme so short pages and macOS rubber-band overscroll show the right color. The hex literals duplicate --fg-paper from styles-field-guide.css (the FG variables are scoped to .fg-root and aren't visible on ); keep them in sync if the palette changes. fg-shell.jsx mirrors the .is-dark class onto . */ html { background: #f6f1e6; } html.is-dark { background: #1a1a1f; } pre { margin: 0; } button { font: inherit; cursor: pointer; } a { color: inherit; } /* who-list shared structure */ .who-raw { white-space: pre; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; line-height: 1.5; overflow-x: auto; } .wh-line { white-space: pre; } /* Skeleton placeholder — abstract parchment-toned blocks while live data is fetched. No fake content ever flashes; the consumer renders these while `live` is false, then swaps to the real render. */ @keyframes sk-pulse { 0% { opacity: 0.55; } 50% { opacity: 0.85; } 100% { opacity: 0.55; } } .sk { display: block; background: linear-gradient(90deg, rgba(140, 120, 90, 0.10) 0%, rgba(140, 120, 90, 0.18) 50%, rgba(140, 120, 90, 0.10) 100%); border-radius: 2px; animation: sk-pulse 1.6s ease-in-out infinite; } .sk-line { height: 12px; margin: 8px 0; } .sk-line.sk-narrow { width: 30%; } .sk-line.sk-mid { width: 60%; } .sk-line.sk-wide { width: 90%; } .sk-block { height: 60px; margin: 12px 0; } .sk-row { display: flex; gap: 12px; margin: 10px 0; } .sk-row .sk { flex: 1; height: 14px; }