/* The DM Bot's small public pages: sign in, invite (set your password), the phone pages of the QR connect, messages, and the AI-app sign-in / "Allow?" pages. Same Mist look as the app (app.css): static/theme.js sets from the look this browser has cached (the person's choice in Settings · Appearance), else Meadow following the device. The token block below is the same text as in app.css (a test keeps them equal). */ /* ---- mist tokens (begin) ---- generated from Phil's design files (Mist Overview M, Desktop Directions palCoastal / palDusk / DN / PAL); app.css and pages.css carry this same block. Six sets: (static/theme.js sets both before the page draws). With no script at all: Meadow, light or dark as the device says. The accent token is the palette's own solid colour (its --c1, a touch brighter on dark, nudged where needed to read at 3:1 against --panel, --ground and --chip): the ON track of every switch, native ticks. */ :root, :root[data-theme="light"][data-palette="meadow"] { color-scheme: light; --ground: #f3f3f0; --panel: #fbfbf9; --chip: #e8e8e3; --line: #eeeee9; --ink: #1c1d1b; --muted: #6b6d68; --nav-fg: #55574f; --nav-on: #fbfbf9; --primary: #1c1d1b; --primary-ink: #f3f3f0; --dot: #c9ea2e; --dot-halo: rgba(201,234,46,.25); --meter: #9cc57f; --avatar: linear-gradient(135deg,#9cc57f,#e9c46a); --t1: radial-gradient(90% 70% at 15% 0%,#4f9a5c 0%,transparent 62%),radial-gradient(90% 90% at 90% 100%,#e4ecb0 0%,transparent 70%),#9cc58a; --t1-ink: #10240f; --t2: radial-gradient(80% 70% at 80% 10%,#f3a560 0%,transparent 65%),radial-gradient(100% 80% at 10% 100%,#7d98b6 0%,transparent 70%),#dbb69c; --t2-ink: #1e1f24; --t3: radial-gradient(80% 80% at 85% 15%,#f4d84e 0%,transparent 70%),radial-gradient(90% 90% at 0% 100%,#eaa06c 0%,transparent 70%),#eed9a2; --t3-ink: #2a2112; --bar1: linear-gradient(90deg,#4f9a5c,#b7d77a); --bar2: linear-gradient(90deg,#e9905a,#f2c46a); --bar3: linear-gradient(90deg,#6f8fb0,#a9c1d6); --bar4: linear-gradient(90deg,#d9c34a,#efe08e); --c1: #4f9a5c; --accent: #489355; --c2: #e9905a; --c3: #6f8fb0; --c4: #d9c34a; --ok-fg: #2f6b3a; --ok-dot: #7fbf5a; --warn-fg: #8a5a00; --warn-dot: #e2a72e; --bad-fg: #a3352b; --bad-dot: #e2685c; --mute-fg: #6b6d68; --mute-dot: #b9bab4; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --ground: #121312; --panel: #1b1c1a; --chip: #272825; --line: #252623; --ink: #ecece6; --muted: #a0a29b; --nav-fg: #a7a9a2; --nav-on: #1f201d; --primary: #ecece6; --primary-ink: #121312; --dot: #c9ea2e; --dot-halo: rgba(201,234,46,.25); --meter: #9cc57f; --avatar: linear-gradient(135deg,#9cc57f,#e9c46a); --t1: radial-gradient(90% 70% at 15% 0%,#397c43 0%,transparent 62%),radial-gradient(90% 90% at 90% 100%,#677432 0%,transparent 70%),#2a4a30; --t1-ink: #eef6e6; --t2: radial-gradient(90% 70% at 15% 0%,#9f5b2e 0%,transparent 62%),radial-gradient(90% 90% at 90% 100%,#3e5674 0%,transparent 70%),#4a3c35; --t2-ink: #f8eee6; --t3: radial-gradient(90% 70% at 15% 0%,#826a1e 0%,transparent 62%),radial-gradient(90% 90% at 90% 100%,#9a5a34 0%,transparent 70%),#4d4128; --t3-ink: #f8f0da; --bar1: linear-gradient(90deg,#4f9a5c,#b7d77a); --bar2: linear-gradient(90deg,#e9905a,#f2c46a); --bar3: linear-gradient(90deg,#6f8fb0,#a9c1d6); --bar4: linear-gradient(90deg,#d9c34a,#efe08e); --c1: #4f9a5c; --accent: #55a061; --c2: #e9905a; --c3: #6f8fb0; --c4: #d9c34a; --ok-fg: #93d48b; --ok-dot: #6fbf5a; --warn-fg: #f0c060; --warn-dot: #e2a72e; --bad-fg: #ff9385; --bad-dot: #e2685c; --mute-fg: #a0a29b; --mute-dot: #6e706a; } } :root[data-theme="dark"], :root[data-theme="dark"][data-palette="meadow"] { color-scheme: dark; --ground: #121312; --panel: #1b1c1a; --chip: #272825; --line: #252623; --ink: #ecece6; --muted: #a0a29b; --nav-fg: #a7a9a2; --nav-on: #1f201d; --primary: #ecece6; --primary-ink: #121312; --dot: #c9ea2e; --dot-halo: rgba(201,234,46,.25); --meter: #9cc57f; --avatar: linear-gradient(135deg,#9cc57f,#e9c46a); --t1: radial-gradient(90% 70% at 15% 0%,#397c43 0%,transparent 62%),radial-gradient(90% 90% at 90% 100%,#677432 0%,transparent 70%),#2a4a30; --t1-ink: #eef6e6; --t2: radial-gradient(90% 70% at 15% 0%,#9f5b2e 0%,transparent 62%),radial-gradient(90% 90% at 90% 100%,#3e5674 0%,transparent 70%),#4a3c35; --t2-ink: #f8eee6; --t3: radial-gradient(90% 70% at 15% 0%,#826a1e 0%,transparent 62%),radial-gradient(90% 90% at 90% 100%,#9a5a34 0%,transparent 70%),#4d4128; --t3-ink: #f8f0da; --bar1: linear-gradient(90deg,#4f9a5c,#b7d77a); --bar2: linear-gradient(90deg,#e9905a,#f2c46a); --bar3: linear-gradient(90deg,#6f8fb0,#a9c1d6); --bar4: linear-gradient(90deg,#d9c34a,#efe08e); --c1: #4f9a5c; --accent: #55a061; --c2: #e9905a; --c3: #6f8fb0; --c4: #d9c34a; --ok-fg: #93d48b; --ok-dot: #6fbf5a; --warn-fg: #f0c060; --warn-dot: #e2a72e; --bad-fg: #ff9385; --bad-dot: #e2685c; --mute-fg: #a0a29b; --mute-dot: #6e706a; } :root[data-theme="light"][data-palette="coastal"] { color-scheme: light; --ground: #f3f3f0; --panel: #fbfbf9; --chip: #e8e8e3; --line: #eeeee9; --ink: #1c1d1b; --muted: #6b6d68; --nav-fg: #55574f; --nav-on: #fbfbf9; --primary: #1c1d1b; --primary-ink: #f3f3f0; --dot: #ff8a65; --dot-halo: rgba(255,138,101,.25); --meter: #4fa3a5; --avatar: linear-gradient(135deg,#6fc3bf,#f0d2a8); --t1: radial-gradient(90% 70% at 15% 0%,#3299a0 0%,transparent 62%),radial-gradient(90% 90% at 90% 100%,#d4efe6 0%,transparent 70%),#7fc0b8; --t1-ink: #08292b; --t2: radial-gradient(80% 70% at 80% 10%,#8cc3ea 0%,transparent 65%),radial-gradient(100% 80% at 10% 100%,#f1cf9f 0%,transparent 70%),#bcd3dc; --t2-ink: #16242e; --t3: radial-gradient(80% 80% at 85% 15%,#ffb199 0%,transparent 70%),radial-gradient(90% 90% at 0% 100%,#f3e2bf 0%,transparent 70%),#f5d2bd; --t3-ink: #3a1d12; --bar1: linear-gradient(90deg,#2f8f95,#8fd3c6); --bar2: linear-gradient(90deg,#5c9fd6,#a9d2ef); --bar3: linear-gradient(90deg,#e98a6c,#f6c2a6); --bar4: linear-gradient(90deg,#d6b27a,#efdcb3); --c1: #2f8f95; --accent: #2f8f95; --c2: #5c9fd6; --c3: #e98a6c; --c4: #d6b27a; --ok-fg: #2f6b3a; --ok-dot: #7fbf5a; --warn-fg: #8a5a00; --warn-dot: #e2a72e; --bad-fg: #a3352b; --bad-dot: #e2685c; --mute-fg: #6b6d68; --mute-dot: #b9bab4; } :root[data-theme="dark"][data-palette="coastal"] { color-scheme: dark; --ground: #101415; --panel: #171c1d; --chip: #222829; --line: #20262a; --ink: #ecece6; --muted: #a0a29b; --nav-fg: #a7a9a2; --nav-on: #1b2122; --primary: #ecece6; --primary-ink: #121312; --dot: #ff8a65; --dot-halo: rgba(255,138,101,.25); --meter: #4fa3a5; --avatar: linear-gradient(135deg,#6fc3bf,#f0d2a8); --t1: radial-gradient(90% 70% at 15% 0%,#1f797f 0%,transparent 62%),radial-gradient(90% 90% at 90% 100%,#2f5a55 0%,transparent 70%),#173b3e; --t1-ink: #e4f5f3; --t2: radial-gradient(90% 70% at 15% 0%,#3b709d 0%,transparent 62%),radial-gradient(90% 90% at 90% 100%,#856642 0%,transparent 70%),#2a3a46; --t2-ink: #e8f0f6; --t3: radial-gradient(90% 70% at 15% 0%,#a7523a 0%,transparent 62%),radial-gradient(90% 90% at 90% 100%,#7a6248 0%,transparent 70%),#4a3028; --t3-ink: #fbe9e1; --bar1: linear-gradient(90deg,#2f8f95,#8fd3c6); --bar2: linear-gradient(90deg,#5c9fd6,#a9d2ef); --bar3: linear-gradient(90deg,#e98a6c,#f6c2a6); --bar4: linear-gradient(90deg,#d6b27a,#efdcb3); --c1: #2f8f95; --accent: #38a0a6; --c2: #5c9fd6; --c3: #e98a6c; --c4: #d6b27a; --ok-fg: #93d48b; --ok-dot: #6fbf5a; --warn-fg: #f0c060; --warn-dot: #e2a72e; --bad-fg: #ff9385; --bad-dot: #e2685c; --mute-fg: #a0a29b; --mute-dot: #6e706a; } :root[data-theme="light"][data-palette="dusk"] { color-scheme: light; --ground: #f4f2f5; --panel: #fcfbfd; --chip: #e9e6ee; --line: #efedf2; --ink: #1c1d1b; --muted: #6c6874; --nav-fg: #57535f; --nav-on: #fcfbfd; --primary: #221f2a; --primary-ink: #f4f2f5; --dot: #ffd23f; --dot-halo: rgba(255,210,63,.3); --meter: #8f7fe0; --avatar: linear-gradient(135deg,#a597ef,#f4b8c8); --t1: radial-gradient(90% 70% at 15% 0%,#8071d6 0%,transparent 62%),radial-gradient(90% 90% at 90% 100%,#f6cfe0 0%,transparent 70%),#a99be6; --t1-ink: #160f33; --t2: radial-gradient(80% 70% at 80% 10%,#f8ad84 0%,transparent 65%),radial-gradient(100% 80% at 10% 100%,#c57fae 0%,transparent 70%),#e7b2b0; --t2-ink: #2c1424; --t3: radial-gradient(80% 80% at 85% 15%,#f6e39a 0%,transparent 70%),radial-gradient(90% 90% at 0% 100%,#bba8ee 0%,transparent 70%),#e9dcc6; --t3-ink: #2a2140; --bar1: linear-gradient(90deg,#6a58cf,#b9adf1); --bar2: linear-gradient(90deg,#e98a8a,#f6c2a6); --bar3: linear-gradient(90deg,#b47ab0,#e3b8dc); --bar4: linear-gradient(90deg,#d8bf55,#f3e5a0); --c1: #6a58cf; --accent: #6a58cf; --c2: #e98a8a; --c3: #b47ab0; --c4: #d8bf55; --ok-fg: #2f6b3a; --ok-dot: #7fbf5a; --warn-fg: #8a5a00; --warn-dot: #e2a72e; --bad-fg: #a3352b; --bad-dot: #e2685c; --mute-fg: #6b6d68; --mute-dot: #b9bab4; } :root[data-theme="dark"][data-palette="dusk"] { color-scheme: dark; --ground: #131218; --panel: #1b1a21; --chip: #26242e; --line: #24222b; --ink: #ecece6; --muted: #a0a29b; --nav-fg: #a7a9a2; --nav-on: #201f27; --primary: #ecece6; --primary-ink: #121312; --dot: #ffd23f; --dot-halo: rgba(255,210,63,.3); --meter: #8f7fe0; --avatar: linear-gradient(135deg,#a597ef,#f4b8c8); --t1: radial-gradient(90% 70% at 15% 0%,#5a48c0 0%,transparent 62%),radial-gradient(90% 90% at 90% 100%,#8a4f74 0%,transparent 70%),#2e2752; --t1-ink: #efeaff; --t2: radial-gradient(90% 70% at 15% 0%,#9f5838 0%,transparent 62%),radial-gradient(90% 90% at 90% 100%,#7a3f6a 0%,transparent 70%),#4a2a38; --t2-ink: #fbe8ef; --t3: radial-gradient(90% 70% at 15% 0%,#7e6b28 0%,transparent 62%),radial-gradient(90% 90% at 90% 100%,#5a4aa0 0%,transparent 70%),#3d3550; --t3-ink: #f7f0d8; --bar1: linear-gradient(90deg,#6a58cf,#b9adf1); --bar2: linear-gradient(90deg,#e98a8a,#f6c2a6); --bar3: linear-gradient(90deg,#b47ab0,#e3b8dc); --bar4: linear-gradient(90deg,#d8bf55,#f3e5a0); --c1: #6a58cf; --accent: #7d6ce0; --c2: #e98a8a; --c3: #b47ab0; --c4: #d8bf55; --ok-fg: #93d48b; --ok-dot: #6fbf5a; --warn-fg: #f0c060; --warn-dot: #e2a72e; --bad-fg: #ff9385; --bad-dot: #e2685c; --mute-fg: #a0a29b; --mute-dot: #6e706a; } /* the palette cards on Settings · Appearance show every palette's tiles in the current mode */ .pal-card[data-pal="meadow"] { --t1: radial-gradient(90% 70% at 15% 0%,#4f9a5c 0%,transparent 62%),radial-gradient(90% 90% at 90% 100%,#e4ecb0 0%,transparent 70%),#9cc58a; --t2: radial-gradient(80% 70% at 80% 10%,#f3a560 0%,transparent 65%),radial-gradient(100% 80% at 10% 100%,#7d98b6 0%,transparent 70%),#dbb69c; --t3: radial-gradient(80% 80% at 85% 15%,#f4d84e 0%,transparent 70%),radial-gradient(90% 90% at 0% 100%,#eaa06c 0%,transparent 70%),#eed9a2; } .pal-card[data-pal="coastal"] { --t1: radial-gradient(90% 70% at 15% 0%,#3299a0 0%,transparent 62%),radial-gradient(90% 90% at 90% 100%,#d4efe6 0%,transparent 70%),#7fc0b8; --t2: radial-gradient(80% 70% at 80% 10%,#8cc3ea 0%,transparent 65%),radial-gradient(100% 80% at 10% 100%,#f1cf9f 0%,transparent 70%),#bcd3dc; --t3: radial-gradient(80% 80% at 85% 15%,#ffb199 0%,transparent 70%),radial-gradient(90% 90% at 0% 100%,#f3e2bf 0%,transparent 70%),#f5d2bd; } .pal-card[data-pal="dusk"] { --t1: radial-gradient(90% 70% at 15% 0%,#8071d6 0%,transparent 62%),radial-gradient(90% 90% at 90% 100%,#f6cfe0 0%,transparent 70%),#a99be6; --t2: radial-gradient(80% 70% at 80% 10%,#f8ad84 0%,transparent 65%),radial-gradient(100% 80% at 10% 100%,#c57fae 0%,transparent 70%),#e7b2b0; --t3: radial-gradient(80% 80% at 85% 15%,#f6e39a 0%,transparent 70%),radial-gradient(90% 90% at 0% 100%,#bba8ee 0%,transparent 70%),#e9dcc6; } :root[data-theme="dark"] .pal-card[data-pal="meadow"] { --t1: radial-gradient(90% 70% at 15% 0%,#397c43 0%,transparent 62%),radial-gradient(90% 90% at 90% 100%,#677432 0%,transparent 70%),#2a4a30; --t2: radial-gradient(90% 70% at 15% 0%,#9f5b2e 0%,transparent 62%),radial-gradient(90% 90% at 90% 100%,#3e5674 0%,transparent 70%),#4a3c35; --t3: radial-gradient(90% 70% at 15% 0%,#826a1e 0%,transparent 62%),radial-gradient(90% 90% at 90% 100%,#9a5a34 0%,transparent 70%),#4d4128; } :root[data-theme="dark"] .pal-card[data-pal="coastal"] { --t1: radial-gradient(90% 70% at 15% 0%,#1f797f 0%,transparent 62%),radial-gradient(90% 90% at 90% 100%,#2f5a55 0%,transparent 70%),#173b3e; --t2: radial-gradient(90% 70% at 15% 0%,#3b709d 0%,transparent 62%),radial-gradient(90% 90% at 90% 100%,#856642 0%,transparent 70%),#2a3a46; --t3: radial-gradient(90% 70% at 15% 0%,#a7523a 0%,transparent 62%),radial-gradient(90% 90% at 90% 100%,#7a6248 0%,transparent 70%),#4a3028; } :root[data-theme="dark"] .pal-card[data-pal="dusk"] { --t1: radial-gradient(90% 70% at 15% 0%,#5a48c0 0%,transparent 62%),radial-gradient(90% 90% at 90% 100%,#8a4f74 0%,transparent 70%),#2e2752; --t2: radial-gradient(90% 70% at 15% 0%,#9f5838 0%,transparent 62%),radial-gradient(90% 90% at 90% 100%,#7a3f6a 0%,transparent 70%),#4a2a38; --t3: radial-gradient(90% 70% at 15% 0%,#7e6b28 0%,transparent 62%),radial-gradient(90% 90% at 90% 100%,#5a4aa0 0%,transparent 70%),#3d3550; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .pal-card[data-pal="meadow"] { --t1: radial-gradient(90% 70% at 15% 0%,#397c43 0%,transparent 62%),radial-gradient(90% 90% at 90% 100%,#677432 0%,transparent 70%),#2a4a30; --t2: radial-gradient(90% 70% at 15% 0%,#9f5b2e 0%,transparent 62%),radial-gradient(90% 90% at 90% 100%,#3e5674 0%,transparent 70%),#4a3c35; --t3: radial-gradient(90% 70% at 15% 0%,#826a1e 0%,transparent 62%),radial-gradient(90% 90% at 90% 100%,#9a5a34 0%,transparent 70%),#4d4128; } } /* ---- mist tokens (end) ---- */ /* older names used below, mapped onto Mist */ :root { --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif; --on-dot: #1c1d1b; --ok-tint: color-mix(in srgb, var(--ok-dot) 16%, var(--panel)); --bad-tint: color-mix(in srgb, var(--bad-dot) 16%, var(--panel)); --bg: var(--ground); --raised: var(--chip); --field: var(--ground); --line-strong: var(--chip); --accent-hover: var(--primary); --accent-ink: var(--primary-ink); --accent-soft: var(--chip); --ok-ink: var(--ok-fg); --weak: var(--bad-fg); --err-bg: var(--bad-tint); --err-ink: var(--bad-fg); --placeholder: var(--muted); } * { box-sizing: border-box; } html, body { margin: 0; background: var(--ground); color: var(--ink); -webkit-font-smoothing: antialiased; font: 17px/1.45 var(--font); } /* bold words use the handoff's 500, not the browser's 700 */ b, strong { font-weight: 500; } input[type=checkbox], input[type=radio] { accent-color: var(--accent); } main { max-width: 440px; margin: 0 auto; padding: calc(40px + env(safe-area-inset-top)) 16px calc(32px + env(safe-area-inset-bottom)); } .brand { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 17px; letter-spacing: -.01em; margin-bottom: 24px; } /* the brand mark, as in the app's sidebar: a chip square with the live dot and its halo */ .brand-mark { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--chip); } .brand-mark i { width: 10px; height: 10px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 5px var(--dot-halo); } .card { background: var(--panel); border: 0; border-radius: 20px; padding: 22px; } h1 { font-size: 30px; font-weight: 300; margin: 0 0 8px; line-height: 1.15; letter-spacing: -.03em; } p { margin: 0 0 14px; } .muted { color: var(--muted); font-size: 15px; } .hint { color: var(--muted); font-size: 14px; margin: 6px 0 0; } .foot { margin-top: 18px; text-align: center; } label { display: block; font-size: 15px; font-weight: 500; margin: 16px 0 6px; } input { width: 100%; font: inherit; color: var(--ink); background: var(--ground); border: 1px solid var(--chip); border-radius: 12px; padding: 12px 14px; min-height: 48px; } input::placeholder { color: var(--muted); } input:focus { outline: none; border-color: var(--ink); box-shadow: none; } .pw { position: relative; } .pw input { padding-right: 76px; } .pw .show { position: absolute; right: 4px; top: 4px; bottom: 4px; min-height: 40px; border: 0; background: transparent; color: var(--nav-fg); font: inherit; font-size: 14px; font-weight: 500; padding: 0 10px; border-radius: 9px; cursor: pointer; } .pw .show:hover { color: var(--ink); background: var(--chip); } .btn { display: block; width: 100%; margin-top: 22px; text-align: center; text-decoration: none; font: inherit; font-size: 16px; font-weight: 500; color: var(--primary-ink); background: var(--primary); border: 0; border-radius: 12px; padding: 13px 16px; min-height: 48px; cursor: pointer; } .btn:hover { background: color-mix(in srgb, var(--primary) 88%, var(--ground)); } .btn:focus-visible, .pw .show:focus-visible, a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .btn:disabled { opacity: .6; cursor: default; } /* an error: the soft red tint, a dot, the words (never colour alone) */ .err { display: none; gap: 10px; align-items: baseline; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--bad-tint); color: var(--bad-fg); font-size: 15px; } .err.on { display: flex; } .err::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--bad-dot); flex: none; transform: translateY(-1px); } .steps { list-style: none; counter-reset: s; padding: 0; margin: 16px 0 4px; display: flex; flex-direction: column; gap: 12px; } .steps li { counter-increment: s; display: flex; gap: 12px; align-items: flex-start; } .steps li::before { content: counter(s); flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--chip); color: var(--ink); font-weight: 500; font-size: 13px; margin-top: 1px; } .steps b { font-weight: 500; } .who { display: block; padding: 10px 12px; border-radius: 12px; background: var(--ground); border: 0; font-size: 15px; margin: 4px 0 2px; } .who b { font-weight: 500; } .state { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 32px; font-weight: 500; line-height: 1; margin: 4px 0 16px; color: var(--on-dot); } .state.ok { background: var(--ok-dot); } .state.bad { background: var(--bad-dot); } .center { text-align: center; } .center .state { margin-left: auto; margin-right: auto; } /* AI apps: the sign-in and "Allow?" pages an AI app (Claude, ChatGPT, Grok) opens */ .pair { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 2px 0 18px; color: var(--muted); } .pair .ai, .pair .brand-mark { width: 48px; height: 48px; border-radius: 14px; } .pair .ai { display: grid; place-items: center; color: var(--on-dot); background: var(--avatar); flex: none; } .pair svg { width: 24px; height: 24px; } .pair .dots { letter-spacing: 3px; font-weight: 500; } .ask { font-size: 17px; line-height: 1.45; margin: 6px 0 14px; } .ask b { font-weight: 500; } .warn { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--bad-tint); color: var(--bad-fg); font-size: 15px; margin: 0 0 4px; } .warn svg { width: 20px; height: 20px; flex: none; margin-top: 1px; } .can { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; } .can li { display: flex; gap: 10px; align-items: flex-start; } .can li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; margin-top: 8px; background: var(--ink); } .facts { list-style: none; padding: 12px 0 0; margin: 16px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 14.5px; overflow-wrap: anywhere; } .facts li:empty { display: none; } .two { display: flex; gap: 10px; margin-top: 22px; } .two .btn { margin-top: 0; } .btn.quiet { color: var(--ink); background: var(--chip); border: 0; box-shadow: none; } .btn.quiet:hover { background: color-mix(in srgb, var(--chip), var(--ink) 6%); } .card h1 + .muted { margin-top: 2px; } /* a computer: a little more air above, a bigger title */ @media (min-width: 761px) { main { padding-top: 72px; } h1 { font-size: 34px; } }