/* skafinity — the TOY PAGE's chrome, and nothing else. * * The widget's own styling lives inside 's shadow root and is derived from what * it measures out here (web/palette.js). So this file is header/footer/link styling plus the two * things the sniff reads off the page: an accent in --ska-accent, and a dark background to sit on. * Nothing below can reach into the widget — that is what the shadow root is for — and nothing in * the widget can leak out here. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* The page has a light and a dark face, and the widget is not TOLD which one is up: it re-measures * this page and re-derives (app.js calls refreshTheme() after the swap). So the switch below is a * live test of the sniff on the flagship page — if the derivation breaks, the toy goes wrong in * front of everybody rather than only in the demos. `data-theme` on is the override; absent * means follow the OS, which is why the light block is written twice. */ :root { color-scheme: dark; --bg: #010402; --surface: #040d07; --panel: #07150c; --border: #102b1a; --text: #aedcbb; --muted: #4c6f59; --accent: #2f9450; --red: #d24545; --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* The highest-priority accent variable the widget looks for. The toy sets it explicitly rather * than leaning on --accent above, because naming it is what an embedding page is told to do. */ --ska-accent: #2f9450; } /* Light — deliberately the same green family, a shade deeper so it still carries on white. */ :root[data-theme="light"] { color-scheme: light; --bg: #f6faf7; --surface: #ffffff; --panel: #eaf2ed; --border: #c9ddd1; --text: #10281a; --muted: #587a67; --accent: #217a41; --red: #b02525; --ska-accent: #217a41; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --bg: #f6faf7; --surface: #ffffff; --panel: #eaf2ed; --border: #c9ddd1; --text: #10281a; --muted: #587a67; --accent: #217a41; --red: #b02525; --ska-accent: #217a41; } } body { background: var(--bg); color: var(--text); font-family: var(--mono); font-size: 13px; min-height: 100dvh; } main { max-width: 720px; margin: 0 auto; padding: 28px 16px 60px; } /* ── Header ── */ header { margin-bottom: 18px; } header h1 { font-size: 28px; font-weight: 600; letter-spacing: 1px; user-select: none; } header h1 span { color: var(--accent); } .htop { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; } .ghlink { color: var(--muted); font-size: 11px; text-decoration: none; border-bottom: 1px solid var(--border); padding-bottom: 1px; transition: color 0.12s, border-color 0.12s; } .ghlink:hover { color: var(--accent); border-bottom-color: var(--accent); } .tag { color: var(--muted); font-size: 12px; margin-top: 6px; line-height: 1.5; } /* ── The page's own bar under the widget ── */ .pagebar { margin-top: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .pagebar .dim { color: var(--muted); font-size: 11px; } button { background: var(--panel); border: 1px solid var(--border); color: var(--text); border-radius: 2px; padding: 6px 14px; font: inherit; font-size: 12px; cursor: pointer; transition: border-color 0.12s, background 0.12s, color 0.12s; } button:hover { border-color: var(--muted); background: var(--surface); } /* ── Status + footer ── */ .status { color: var(--red); min-height: 20px; font-size: 12px; margin-top: 12px; } footer { color: var(--muted); margin-top: 26px; font-size: 11px; border-top: 1px solid var(--border); padding-top: 14px; line-height: 1.9; } footer code { font-family: var(--mono); font-size: 11px; background: var(--panel); border: 1px solid var(--border); border-radius: 2px; padding: 1px 6px; color: var(--accent); }