/* GuideGen — site styles: landing page, guide editor, public viewer. The popup carries its own copy of these tokens, because an extension page can't load a stylesheet from here. Any control on both surfaces has to be styled in both places. Light and dark are both first class. */ :root { /* Ink & Paper. Two rules govern this palette, and they are the whole reason it doesn't look like every other purple-on-slate dashboard: 1. The neutrals are WARM. Cool slate greys are what every framework default ships, so warm paper is the single cheapest way to look deliberate. 2. Colour carries meaning, it is never decoration. The primary button is ink, not a brand hue — so the only saturated things on screen are the ones that mean something: a step number, an annotation, a recording light, a guide that is shared. One accent doing six jobs is what "nobody decided anything" looks like. */ /* the one accent — step numbers, annotations, focus. Ochre, not purple: it has to stay legible drawn on top of the blue-grey admin panels this product exists to document, and orange is as far from that chrome as it gets. */ --brand: #c2410c; --brand-2: #9e340a; --brand-soft: #f6ece2; --brand-ring: rgba(194, 65, 12, 0.28); --on-brand: #fffdfa; /* primary action = ink. Confident, and it never dates. */ --pri: #1a1713; --pri-2: #322b23; --pri-fg: #fbfaf7; --bg: #fbfaf7; --bg-2: #f4f1ea; --panel: #ffffff; --panel-2: #f5f2ec; --ink: #1a1713; --ink-2: #443c31; --muted: #6f675b; --faint: #928879; --line: #e5dfd2; /* semantic, and tokenised so there is exactly one place to change them */ --ok: #16643f; --err: #a8321f; --rec: #c1352c; --live-fg: #2f6344; --live-bg: #e7ece2; --r-sm: 7px; --r: 10px; --r-lg: 14px; --r-xl: 22px; /* Borders do the separating; shadows only lift things that genuinely float. Shadow on everything is another generated-UI tell. */ --sh-1: 0 1px 2px rgba(26, 23, 19, 0.05); --sh-2: 0 6px 20px rgba(26, 23, 19, 0.07); --sh-3: 0 22px 60px rgba(26, 23, 19, 0.16); --fast: 130ms cubic-bezier(0.2, 0, 0.2, 1); --wrap: 1080px; /* native scrollbars, date pickers and form widgets follow this */ color-scheme: light; } /* Dark is a *choice* now, not an OS reading. assets/theme.js resolves light | dark | auto and stamps data-theme on before the first paint, so there is exactly one dark block here and no duplicated values. The site already can't work without JS — the whole dashboard and the public viewer are JS — so relying on it costs nothing, and if theme.js ever fails to load the page falls back to light, which is safe. The default is LIGHT, not the OS setting. Every artefact this product makes is light — the HTML export, the PDF, the published guide, the video slides — so an editor that matches the thing you're building is more coherent than one that flips with the time of day. "Auto" is one click away for anyone who wants it. */ :root[data-theme="dark"] { color-scheme: dark; /* Warm near-black, not navy. Same reasoning as the light scale. */ --brand: #e08a4f; --brand-2: #eb9c65; --brand-soft: #2c2318; --brand-ring: rgba(224, 138, 79, 0.30); --on-brand: #21180f; --pri: #f2ede3; --pri-2: #ffffff; --pri-fg: #15130f; --bg: #15130f; --bg-2: #1a1712; --panel: #1c1a15; --panel-2: #23201a; --ink: #f2ede3; --ink-2: #cbc2b1; --muted: #9a9080; --faint: #746b5d; --line: #332e26; --ok: #63c08e; --err: #f0897c; --rec: #ef7a72; --live-fg: #88bd99; --live-bg: #1f2a20; --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4); --sh-2: 0 6px 20px rgba(0, 0, 0, 0.45); --sh-3: 0 22px 60px rgba(0, 0, 0, 0.6); } * { box-sizing: border-box; } /* The hidden attribute has to beat component display rules. The UA stylesheet's [hidden]{display:none} loses on specificity to things like .auth-wrap{display:grid} and header nav{display:flex} — which meant a signed-in user saw the sign-in form AND the dashboard stacked, with both navs in the header. Verified by screenshot; a DOM check on el.hidden passes regardless, so don't trust that alone. */ [hidden] { display: none !important; } /* scrollbar-gutter keeps the layout still when a dialog locks body scrolling — without it the page jumps sideways by the scrollbar width as the modal opens. */ html { scroll-behavior: smooth; scrollbar-gutter: stable; } /* The page behind a dialog must not scroll under it. The overlay does its own scrolling now, so there is nothing lost. */ body.modal-open { overflow: hidden; } body { margin: 0; font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; } a { color: var(--brand-2); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; height: auto; display: block; } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 22px; } .narrow { max-width: 720px; } /* ---------- header ---------- */ header.site { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line); } header.site .row { display: flex; align-items: center; gap: 14px; height: 62px; max-width: var(--wrap); margin: 0 auto; padding: 0 22px; } .brand { display: flex; align-items: center; gap: 9px; font-weight: 650; color: var(--ink); } .brand:hover { text-decoration: none; } .brand .mark { width: 27px; height: 27px; border-radius: 8px; flex: none; background: var(--pri); color: var(--pri-fg); display: grid; place-items: center; } .brand .mark svg { width: 15px; height: 15px; } .brand span { letter-spacing: -0.015em; } header.site nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } header.site nav a { color: var(--ink-2); font-size: 14px; font-weight: 550; padding: 7px 10px; border-radius: var(--r-sm); } header.site nav a:hover { background: var(--panel-2); text-decoration: none; color: var(--ink); } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--ink-2); padding: 11px 17px; border-radius: var(--r-sm); font-size: 14.5px; font-weight: 620; cursor: pointer; /* A