/* Pages for the NoteSupreme Notepad Chrome extension (/chrome/*). Static, no JS. */
:root {
  --ocean: #00668a; --sail: #1fa9e0; --navy: #0b3d62; --coral: #f2643f; --lagoon: #00a896;
  --paper: #fdfbf7; --side: #eaf7fb; --win: #ffffff; --line: #d6e2ea;
  --ink: #171c20; --ink-2: #3e484f; --muted: #6e7880;
  --g-pri: linear-gradient(180deg, #1f8fbd 0%, #00668a 55%, #00587a 100%);
  --f-head: "Quicksand", "Nunito Sans", system-ui, sans-serif;
  --f-body: "Nunito Sans", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #11191e; --side: #182127; --win: #151c21; --line: #26333b; --ink: #e6edf2; --ink-2: #b9c6cf;
    --muted: #8796a1; --navy: #7ad0ff; --ocean: #4fc0ef; color-scheme: dark; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.65 var(--f-body); }
a { color: var(--ocean); }
.top { display: flex; align-items: center; gap: 10px; padding: 14px max(16px, 4vw); border-bottom: 1px solid var(--line); }
.top img { width: 34px; height: 34px; }
.top a.brand { font: 700 18px var(--f-head); color: var(--navy); text-decoration: none; }
.top nav { margin-left: auto; display: flex; gap: 16px; font: 700 14px var(--f-head); flex-wrap: wrap; }
.top nav a { text-decoration: none; color: var(--ink-2); }
.top nav a[aria-current="page"] { color: var(--ocean); }
main { max-width: 760px; margin: 0 auto; padding: 36px 16px 64px; }
h1 { font: 700 32px/1.2 var(--f-head); color: var(--navy); margin: 0 0 8px; text-wrap: balance; }
h2 { font: 700 21px/1.3 var(--f-head); color: var(--navy); margin: 34px 0 8px; }
h3 { font: 700 17px var(--f-head); margin: 22px 0 4px; }
.lead { font-size: 18px; color: var(--ink-2); margin: 0 0 8px; }
.updated { color: var(--muted); font-size: 14px; margin: 0 0 24px; }
.card { background: var(--side); border: 1px solid var(--line); border-radius: 14px; padding: 16px 20px; margin: 20px 0; }
.card > :first-child { margin-top: 0; } .card > :last-child { margin-bottom: 0; }
ul, ol { padding-left: 22px; } li + li { margin-top: 4px; }
code, kbd { font: 14px var(--f-mono); background: var(--side); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 15px; }
th, td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
th { background: var(--side); font-family: var(--f-head); }
.btn { display: inline-block; padding: 10px 18px; border-radius: 12px; color: #fff; background: var(--g-pri); text-decoration: none;
  font: 700 15px var(--f-head); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 5px 12px rgba(0,102,138,.3); }
footer { border-top: 1px solid var(--line); padding: 20px 16px 40px; text-align: center; color: var(--muted); font-size: 14px; }
footer a { margin: 0 8px; }