/* Monestra — user manual * * Shares the palette and type of monestra.app (marketing/site/page.template.html) so the * manual reads as part of the product rather than as documentation bolted on beside it: * the same aurora, the same serif display face, the same ink and hairline tokens. * * Light is defined on bare :root; dark redefines ONLY the tokens, once under * prefers-color-scheme (guarded so an explicit light choice wins) and once under * [data-theme="dark"] (so the toggle wins in both directions). No colour is ever defined * for the first time inside a media query — that is what makes a theme half-apply. */ :root { --ink: #FAF9FE; --ink-2: #F4F1FB; --surface: #FFFFFF; --surface-2: #FBFAFE; --hairline: #1B143612; --hairline-2: #1B143626; --text: #16112E; --text-2: #504977; --text-3: #7C749C; --indigo: #5429E6; --violet: #8C33EB; --pink: #FF548C; --aurora: linear-gradient(115deg, #5429E6 0%, #8C33EB 38%, #CC3DC7 70%, #FF548C 100%); --shadow-sm: 0 1px 2px #1B143610, 0 4px 12px #1B143608; --shadow-lg: 0 2px 6px #1B143612, 0 18px 48px #1B143614; --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif; --display: ui-serif, "New York", "Iowan Old Style", Palatino, Georgia, serif; --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Two measures, not one. `--measure` is the running text; `--measure-wide` is the column figures and tables get. 70ch sounds conservative and is not: `ch` is the width of the "0" glyph, and lowercase letters are narrower, so 70ch rendered as ~81 characters a line — past the 45–75 that reads comfortably. 40rem lands at ~65. In `rem`, deliberately, NOT `ch`. A ch is relative to the element's OWN font size, so the same `60ch` gave the h1 (48px) a 1700px box and the eyebrow (12px) a 420px one — every block in the column started at a different left edge. rem is absolute, so they align. */ --measure: 40rem; --measure-wide: 54rem; --radius: 16px; --sidebar: 17.5rem; --rail: 15rem; --ok: #0F8A5F; --warn: #B4690E; --danger: #C6304A; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink: #07060F; --ink-2: #0C0A17; --surface: #150F2E; --surface-2: #191234; --hairline: #FFFFFF14; --hairline-2: #FFFFFF29; --text: #F4F2FC; --text-2: #ADA6C9; --text-3: #736C96; --indigo: #A78BFA; --violet: #C4B5FD; --shadow-sm: 0 1px 2px #00000050, 0 4px 12px #00000040; --shadow-lg: 0 2px 6px #00000060, 0 18px 48px #00000070; --ok: #4ADE9B; --warn: #F0B45E; --danger: #FF7D95; color-scheme: dark; } } :root[data-theme="dark"] { --ink: #07060F; --ink-2: #0C0A17; --surface: #150F2E; --surface-2: #191234; --hairline: #FFFFFF14; --hairline-2: #FFFFFF29; --text: #F4F2FC; --text-2: #ADA6C9; --text-3: #736C96; --indigo: #A78BFA; --violet: #C4B5FD; --shadow-sm: 0 1px 2px #00000050, 0 4px 12px #00000040; --shadow-lg: 0 2px 6px #00000060, 0 18px 48px #00000070; --ok: #4ADE9B; --warn: #F0B45E; --danger: #FF7D95; color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--ink); color: var(--text); font-family: var(--sans); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--indigo); text-decoration-color: color-mix(in srgb, var(--indigo) 35%, transparent); text-underline-offset: 2px; } a:hover { text-decoration-color: currentColor; } /* ---------- Screenshot theme switching ---------- */ .shot-img--dark { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .shot-img--light { display: none; } :root:not([data-theme="light"]) .shot-img--dark { display: block; } } :root[data-theme="dark"] .shot-img--light { display: none; } :root[data-theme="dark"] .shot-img--dark { display: block; } :root[data-theme="light"] .shot-img--light { display: block; } :root[data-theme="light"] .shot-img--dark { display: none; } /* ---------- Top bar ---------- */ .topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 1rem; height: 3.75rem; padding: 0 1.25rem; background: color-mix(in srgb, var(--ink) 82%, transparent); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--hairline); } .brand { display: flex; align-items: center; gap: .6rem; font-weight: 650; letter-spacing: -.015em; color: var(--text); text-decoration: none; } /* The real app icon, at the size and radius the landing page uses. This was a CSS gradient square with a letter "M" in it — close enough to pass at a glance and a *different mark* from the one on every other Monestra surface. One icon file, shared. */ .brand img { width: 30px; height: 30px; border-radius: 8px; display: block; } .brand-sub { color: var(--text-3); font-weight: 450; padding-left: .55rem; margin-left: .1rem; border-left: 1px solid var(--hairline-2); } .topbar-spacer { flex: 1; } .search-box { position: relative; width: min(22rem, 42vw); } .search-box input { width: 100%; height: 2.25rem; padding: 0 2rem 0 2.2rem; border-radius: 10px; border: 1px solid var(--hairline-2); background: var(--surface); color: var(--text); font: inherit; font-size: 14.5px; } .search-box input:focus { outline: 2px solid color-mix(in srgb, var(--indigo) 45%, transparent); outline-offset: 1px; border-color: transparent; } .search-box::before { content: "⌕"; position: absolute; left: .7rem; top: 50%; transform: translateY(-52%); color: var(--text-3); font-size: 1.05rem; pointer-events: none; } .search-box kbd { position: absolute; right: .45rem; top: 50%; transform: translateY(-50%); pointer-events: none; opacity: .75; } .icon-btn { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 9px; border: 1px solid var(--hairline-2); background: var(--surface); color: var(--text-2); cursor: pointer; font-size: 15px; } .icon-btn:hover { color: var(--text); border-color: var(--text-3); } .nav-toggle { display: none; } /* ---------- Layout ---------- */ .layout { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr) var(--rail); gap: 0; } /* No max-width on the grid itself. Capping it centred the *whole* layout, so on a wide display the sidebar floated in from the window edge with a strip of nothing to its left — which reads as a rendering fault rather than a margin. The sidebar anchors left, as it does in every docs site, and the reading column is capped and centred in the space that is left. */ .prose { margin-inline: auto; } .sidebar { position: sticky; top: 3.75rem; align-self: start; height: calc(100vh - 3.75rem); overflow-y: auto; padding: 1.75rem 1rem 4rem 1.5rem; border-right: 1px solid var(--hairline); scrollbar-width: thin; } .sidebar-part { margin: 1.5rem 0 .45rem; padding-left: .6rem; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); } .sidebar-part:first-child { margin-top: 0; } .sidebar a { display: block; padding: .34rem .6rem; margin: 1px 0; border-radius: 8px; font-size: 14.5px; line-height: 1.4; color: var(--text-2); text-decoration: none; } .sidebar a:hover { background: var(--hairline); color: var(--text); } .sidebar a.current { background: color-mix(in srgb, var(--indigo) 12%, transparent); color: var(--indigo); font-weight: 600; } .rail { position: sticky; top: 3.75rem; align-self: start; height: calc(100vh - 3.75rem); overflow-y: auto; padding: 1.75rem 1.5rem 4rem 1rem; font-size: 13.5px; } .rail-title { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); margin-bottom: .6rem; } .rail a { display: block; padding: .26rem 0 .26rem .7rem; color: var(--text-3); text-decoration: none; border-left: 2px solid var(--hairline-2); line-height: 1.45; } .rail a:hover { color: var(--text); } .rail a.current { color: var(--indigo); border-left-color: var(--indigo); font-weight: 550; } .rail a.lvl-3 { padding-left: 1.4rem; font-size: 13px; } main { min-width: 0; padding: 2.5rem 3rem 6rem; } /* The prose column is the WIDE measure, and running text is narrowed inside it. Done this way round on purpose: the obvious alternative — a narrow column with figures broken out by negative margins — is what put a horizontal scrollbar on the legal pages, because the broken-out box keeps its layout width even when a transform moves it. Everything here is `max-width`, so nothing can exceed its container at any viewport. */ .prose { max-width: var(--measure-wide); } /* `.chapter` as well as `.prose`: the single-file edition wraps each chapter in a
, so its paragraphs are grandchildren of .prose and a `>` selector alone left every chapter at the full container width while the cover was correctly narrowed. */ :is(.prose, .chapter) > :is(p, ul, ol, h1, h2, h3, h4, blockquote, hr, .lede, .eyebrow, .callout, ol.steps) { max-width: var(--measure); margin-inline: auto; } /* ---------- Typography ---------- */ .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--violet); margin: 0 0 .5rem; } h1 { font-family: var(--display); font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3rem); line-height: 1.1; letter-spacing: -.02em; font-weight: 600; margin: 0 0 .6rem; } .lede { font-size: 1.2rem; line-height: 1.55; color: var(--text-2); max-width: 62ch; margin: 0 0 2.25rem; } h2 { font-family: var(--display); font-size: 1.75rem; line-height: 1.22; letter-spacing: -.014em; font-weight: 600; margin: 3rem 0 .85rem; padding-top: .4rem; } h3 { font-size: 1.16rem; font-weight: 660; letter-spacing: -.008em; margin: 2.1rem 0 .6rem; } h4 { font-size: 1rem; font-weight: 650; margin: 1.6rem 0 .4rem; color: var(--text-2); } p { margin: 0 0 1.1rem; } h2 + p, h3 + p, h4 + p { margin-top: 0; } strong { font-weight: 640; color: var(--text); } hr { border: 0; height: 1px; background: var(--hairline-2); margin: 2.75rem 0; } .anchor { margin-left: .45rem; color: var(--text-3); opacity: 0; text-decoration: none; font-weight: 400; } h2:hover .anchor, h3:hover .anchor { opacity: .6; } .anchor:hover { opacity: 1 !important; } ul, ol { margin: 0 0 1.15rem; padding-left: 1.35rem; } li { margin: .34rem 0; } li > strong:first-child { color: var(--text); } code { font-family: var(--mono); font-size: .875em; background: var(--hairline); padding: .12em .38em; border-radius: 5px; } kbd { font-family: var(--sans); font-size: 12px; font-weight: 560; line-height: 1; display: inline-block; padding: .28em .45em; margin: 0 .09em; border: 1px solid var(--hairline-2); border-bottom-width: 2px; border-radius: 6px; background: var(--surface); color: var(--text-2); box-shadow: 0 1px 0 var(--hairline); } blockquote { margin: 1.5rem 0; padding: .1rem 0 .1rem 1.15rem; border-left: 2px solid var(--hairline-2); color: var(--text-2); } blockquote p:last-child { margin-bottom: 0; } /* ---------- Tables ---------- */ .table-wrap { overflow-x: auto; margin: 1.5rem 0; border: 1px solid var(--hairline); border-radius: 12px; background: var(--surface); } table { border-collapse: collapse; width: 100%; font-size: 14.5px; } th, td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--hairline); vertical-align: top; } th { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); background: var(--surface-2); } tbody tr:last-child td { border-bottom: 0; } /* ---------- Callouts ---------- */ .callout { margin: 1.6rem 0; padding: 1rem 1.15rem; border: 1px solid var(--hairline-2); border-left-width: 3px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-sm); } .callout-label { margin: 0 0 .35rem; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .callout-body > :last-child { margin-bottom: 0; } .callout-body { font-size: 15.5px; color: var(--text-2); } .callout--note { border-left-color: var(--indigo); } .callout--note .callout-label { color: var(--indigo); } .callout--tip { border-left-color: var(--ok); } .callout--tip .callout-label { color: var(--ok); } .callout--privacy { border-left-color: var(--violet); } .callout--privacy .callout-label { color: var(--violet); } .callout--warning { border-left-color: var(--warn); } .callout--warning .callout-label { color: var(--warn); } .callout--key { border-left-color: var(--text-3); } .callout--key .callout-label { color: var(--text-3); } /* ---------- Steps ---------- */ ol.steps { list-style: none; counter-reset: step; padding-left: 0; margin: 1.5rem 0; } ol.steps > li { counter-increment: step; position: relative; padding: .1rem 0 1.1rem 2.6rem; margin: 0; } ol.steps > li::before { content: counter(step); position: absolute; left: 0; top: .05rem; width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center; background: var(--aurora); color: #fff; font-size: 12.5px; font-weight: 700; box-shadow: var(--shadow-sm); } ol.steps > li:not(:last-child)::after { content: ""; position: absolute; left: .82rem; top: 2rem; bottom: .15rem; width: 1px; background: var(--hairline-2); } /* ---------- Figures ---------- */ /* Figures are sized by HEIGHT, not width. On a scrolling page a figure's visual weight is how much vertical room it takes, and capping width got that wrong in both directions: a phone capture (1206x2622) and a Mac window (2226x1714) are wildly different shapes, so the same width made the phone a narrow ribbon and an iPad portrait shot (2064x2752) 1,152px tall — nearly twice its neighbours. One max-height instead, and every figure lands at a comparable size whatever device took it. The frame shrink-wraps the image so the border always hugs the screenshot. */ :root { --shot-height: 40rem; } .shot { margin: 1.9rem 0; } .shot-frame { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--hairline-2); background: var(--surface); box-shadow: var(--shadow-lg); line-height: 0; width: fit-content; max-width: 100%; margin-inline: auto; } .shot-img { display: block; max-height: var(--shot-height); width: auto; max-width: 100%; height: auto; } .shot figcaption { margin-top: .7rem; text-align: center; font-size: 13.5px; line-height: 1.5; color: var(--text-3); } .shot--missing .shot-frame { min-height: 9rem; display: grid; place-items: center; border-style: dashed; background: var(--surface-2); } .shot--missing .shot-frame::after { content: "screenshot pending"; font-size: 12.5px; color: var(--text-3); letter-spacing: .04em; } .shot--missing .shot-img { display: none; } .shot-row { display: grid; gap: 1.15rem; margin: 1.9rem 0; } .shot-row--2 { grid-template-columns: 1fr 1fr; } .shot-row--3 { grid-template-columns: repeat(3, 1fr); } .shot-row .shot { margin: 0; } .shot-row figcaption { font-size: 12.5px; } /* A phone capture is very tall; unconstrained it pushes a whole screen of prose off the page. Cap the height and let the frame size to it. */ .shot--phone .shot-frame { max-width: 21rem; margin-inline: auto; } /* ---------- Chapter footer nav ---------- */ .pager { display: flex; gap: 1rem; margin-top: 4rem; padding-top: 1.75rem; border-top: 1px solid var(--hairline); } .pager a { flex: 1; padding: .9rem 1.1rem; border: 1px solid var(--hairline-2); border-radius: 12px; background: var(--surface); text-decoration: none; color: var(--text); box-shadow: var(--shadow-sm); } .pager a:hover { border-color: var(--indigo); } .pager .dir { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: .15rem; } .pager .title { font-weight: 600; letter-spacing: -.01em; } .pager .next { text-align: right; } /* ---------- Search overlay ---------- */ .search-results { position: absolute; top: calc(100% + .5rem); left: 0; right: 0; z-index: 60; max-height: 70vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--hairline-2); border-radius: 12px; box-shadow: var(--shadow-lg); padding: .4rem; } .search-results:empty { display: none; } .search-results a { display: block; padding: .5rem .65rem; border-radius: 8px; text-decoration: none; color: var(--text); } .search-results a:hover, .search-results a.active { background: var(--hairline); } /* Each part on its own line. These are s, so without `display: block` they ran together — "LOCK, MASKING AND PRIVACYWhat is encryptedThis is where being precise…" — one unreadable paragraph per result. */ .search-results a { display: block; padding: .55rem .65rem; } .search-results .sr-chapter { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); margin-bottom: .12rem; } .search-results .sr-title { display: block; font-weight: 600; font-size: 14.5px; color: var(--text); margin-bottom: .15rem; } .search-results .sr-snippet { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; color: var(--text-2); line-height: 1.45; } .search-results mark { background: color-mix(in srgb, var(--violet) 28%, transparent); color: inherit; border-radius: 3px; padding: 0 .1em; } /* ---------- Home / cover ---------- */ .cover { text-align: center; padding: 2rem 0 1rem; } .cover h1 { font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4rem); } .cover .lede { margin-inline: auto; } .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; margin: 2rem 0; } .card { display: block; padding: 1.1rem 1.2rem; border-radius: 14px; border: 1px solid var(--hairline-2); background: var(--surface); text-decoration: none; color: var(--text); box-shadow: var(--shadow-sm); } .card:hover { border-color: var(--indigo); transform: translateY(-1px); } .card h3 { margin: 0 0 .25rem; font-size: 1rem; } .card p { margin: 0; font-size: 14px; color: var(--text-2); line-height: 1.5; } .card .card-num { font-family: var(--display); font-size: 12px; color: var(--violet); display: block; margin-bottom: .3rem; } /* ---------- Responsive ---------- */ @media (max-width: 1180px) { .layout { grid-template-columns: var(--sidebar) minmax(0, 1fr); } .rail { display: none; } main { padding: 2.5rem 2.25rem 6rem; } } @media (max-width: 860px) { .layout { grid-template-columns: minmax(0, 1fr); } .nav-toggle { display: grid; } .sidebar { position: fixed; top: 3.75rem; left: 0; width: min(20rem, 84vw); z-index: 45; background: var(--ink); transform: translateX(-102%); transition: transform .22s ease; border-right: 1px solid var(--hairline-2); } body.nav-open .sidebar { transform: none; box-shadow: var(--shadow-lg); } main { padding: 2rem 1.25rem 5rem; } .search-box { width: auto; flex: 1; } .brand-sub { display: none; } .shot-row--2, .shot-row--3 { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } } /* ---------- Print (Save as PDF) ---------- */ @media print { .topbar, .sidebar, .rail, .pager, .anchor { display: none !important; } .layout { display: block; max-width: none; } main { padding: 0; } .prose { max-width: none; } body { font-size: 11pt; background: #fff; color: #000; } .shot-img--dark { display: none !important; } .shot-img--light, .shot-img--both { display: block !important; } .shot, .callout, table { break-inside: avoid; } h1, h2, h3 { break-after: avoid; } a { color: #000; text-decoration: none; } } /* Figures inside a row share the row's height budget, and get less of it — two or three side by side should not each be as tall as a lone figure. */ .shot-row .shot-img { max-height: calc(var(--shot-height) * 0.8); } /* Keyboard focus. The sidebar is 30-odd links deep, so tabbing through it is a real way to move around the manual and needs to be visible. `:focus-visible` rather than `:focus`, so a mouse click does not leave a ring behind. */ a:focus-visible, button:focus-visible, input:focus-visible, kbd:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; border-radius: 6px; } /* A page with no "on this page" rail — the cover, and any chapter without headings — drops the third column rather than rendering an empty one. An empty