/* MesoNotes website — self-hosted fonts, no third-party requests */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-display: swap; font-weight: 200 800; font-stretch: 75% 100%;
  src: url(fonts/bricolage-grotesque-latin-ext-standard-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-display: swap; font-weight: 200 800; font-stretch: 75% 100%;
  src: url(fonts/bricolage-grotesque-latin-standard-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-display: swap; font-weight: 400;
  src: url(fonts/atkinson-hyperlegible-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-display: swap; font-weight: 400;
  src: url(fonts/atkinson-hyperlegible-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-display: swap; font-weight: 700;
  src: url(fonts/atkinson-hyperlegible-latin-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-display: swap; font-weight: 700;
  src: url(fonts/atkinson-hyperlegible-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  /* the colours of the app's main theme: neutral greys with blue */
  --bg: #f2f4f8;
  --surface: #ffffff;
  --ink: #161616;
  --muted: #525252;
  --link: #0f62fe;
  --line: #dde1e6;
  --glow: rgba(14, 101, 251, 0.4);
  --ribbon: linear-gradient(120deg, #78a9ff 0%, #0e65fb 55%, #0043ce 100%);
  --display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --text: 'Atkinson Hyperlegible', 'Segoe UI', system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161616;
    --surface: #1e1e1e;
    --ink: #f4f4f4;
    --muted: #a8a8a8;
    --link: #78a9ff;
    --line: #393939;
    --glow: rgba(14, 101, 251, 0.5);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--text);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; border-radius: 4px; }

/* the two languages live side by side; the inactive one is hidden */
html[data-lang='hu'] [lang='en'], html[data-lang='en'] [lang='hu'] { display: none !important; }

.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }

/* top bar */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 20px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 700 1.25rem/1 var(--display); }
.brand img { width: 34px; height: 34px; }
.langs { display: flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: var(--surface); }
.langs button {
  font: 700 0.875rem/1 var(--text); color: var(--muted); background: none; border: 0; border-radius: 999px;
  padding: 7px 12px; cursor: pointer;
}
.langs button[aria-pressed='true'] { background: var(--ink); color: var(--bg); }

/* hero */
.hero { padding-block: 40px 28px; max-width: 46rem; }
.hero h1 {
  font: 800 clamp(2.5rem, 7vw, 4.75rem)/0.98 var(--display);
  font-stretch: 78%;
  letter-spacing: -0.01em;
  margin: 0 0 22px;
  text-wrap: balance;
}
.hero p { font-size: 1.1875rem; color: var(--muted); margin: 0 0 28px; max-width: 38rem; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 10px;
  font: 700 1rem/1 var(--text); text-decoration: none; border: 1px solid var(--line); color: var(--ink); background: var(--surface);
}
.btn.primary { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn.primary:hover { text-decoration: underline; }

/* the screenshot: the one loud element — framed by the logo's ribbon */
.shots { margin-block: 24px 72px; }
.shot-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.shot-tabs button {
  font: 600 0.9688rem/1 var(--display); color: var(--muted); background: none; border: 1px solid transparent; border-radius: 8px;
  padding: 9px 12px; cursor: pointer;
}
.shot-tabs button:hover { color: var(--ink); }
.shot-tabs button[aria-selected='true'] { color: var(--ink); border-color: var(--line); background: var(--surface); box-shadow: inset 0 -2px 0 var(--link); }
.frame { padding: 6px; border-radius: 18px; background: var(--ribbon); box-shadow: 0 30px 60px -30px var(--glow); }
.frame img { border-radius: 13px; width: 100%; aspect-ratio: 1440 / 900; object-fit: cover; background: #161616; }
.caption { color: var(--muted); font-size: 0.9375rem; margin-top: 12px; min-height: 3em; }

/* sections */
section { padding-block: 40px; border-top: 1px solid var(--line); }
h2 { font: 700 clamp(1.6rem, 3.2vw, 2.25rem)/1.15 var(--display); font-stretch: 88%; margin: 0 0 22px; }
.lead { max-width: 40rem; color: var(--muted); margin: -8px 0 28px; }

.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 56px; margin: 0; }
.features div { max-width: 34rem; }
.features dt { font: 700 1.1875rem/1.3 var(--display); margin-bottom: 6px; }
.features dd { margin: 0; color: var(--muted); }

.private { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.private ul { margin: 0; padding-left: 1.2em; }
.private li { margin-bottom: 8px; }

.dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dl > div { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; }
.dl h3 { font: 700 1.125rem/1.2 var(--display); margin: 0 0 6px; }
.dl p { margin: 0; color: var(--muted); font-size: 0.9688rem; }
.soon { display: inline-block; margin-top: 12px; font-weight: 700; font-size: 0.9375rem; color: var(--ink); }
code { font-size: 0.92em; background: var(--surface); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; }

footer { border-top: 1px solid var(--line); padding-block: 28px 48px; color: var(--muted); font-size: 0.9375rem; }
footer .row { display: flex; flex-wrap: wrap; gap: 8px 28px; }
footer p { margin: 0 0 10px; }

/* privacy page */
.doc { max-width: 44rem; padding-block: 24px 40px; }
.doc h1 { font: 800 clamp(2.2rem, 5vw, 3.25rem)/1.05 var(--display); font-stretch: 80%; margin: 0 0 10px; }
.doc .updated { color: var(--muted); margin: 0 0 32px; }
.doc h2 { font-size: 1.5rem; margin: 36px 0 12px; }
.doc p, .doc li { line-height: 1.68; }
.doc .note { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--link); border-radius: 8px; padding: 14px 18px; }

/* bug report form */
.form { display: grid; gap: 6px; margin-top: 28px; }
.form label { font: 700 1rem/1.3 var(--display); margin-top: 16px; }
.form label b { color: var(--link); }
.form input, .form textarea, .form select {
  width: 100%; font: 400 1rem/1.5 var(--text); color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
}
.form textarea { resize: vertical; }
.form .mono { font: 400 0.875rem/1.5 ui-monospace, 'JetBrains Mono', 'Cascadia Mono', Menlo, Consolas, monospace; }
.form input:focus-visible, .form textarea:focus-visible, .form select:focus-visible { outline-offset: 1px; }
.form .bad { border-color: #da1e28; }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.form .two > div { display: grid; gap: 6px; }
.form .hint { color: var(--muted); font-size: 0.9063rem; margin: 2px 0 0; }
.form .note { margin: 20px 0 0; }
.form .actions { margin-top: 18px; }
.form button.btn { cursor: pointer; }
.form-msg { min-height: 1.6em; margin: 14px 0 0; font-weight: 700; }
.doc em { font-style: normal; font-weight: 700; }

@media (max-width: 760px) {
  .form .two { grid-template-columns: 1fr; }
  .features, .private, .dl { grid-template-columns: 1fr; }
  .hero { padding-top: 16px; }
  .shots { margin-bottom: 48px; }
  /* many tabs: one row that scrolls sideways */
  .shot-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; }
  .shot-tabs button { flex: none; scroll-snap-align: start; }
  .frame { padding: 4px; border-radius: 12px; }
  .frame img { border-radius: 9px; }
}
@media (prefers-reduced-motion: no-preference) {
  .frame img { transition: opacity 0.18s ease; }
}

/* downloads of the current release (index.html #dl-release, filled by site.js from downloads.json) */
[hidden] { display: none !important; }
.dl-date { color: var(--muted); font-weight: 400; margin-left: 6px; }
.dl-files { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dl-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; min-width: 0; }
.dl-card.dl-windows { grid-column: 1 / -1; }
.dl-card h3 { font: 700 1.125rem/1.2 var(--display); margin: 0 0 6px; }
.dl-card p { margin: 0 0 8px; color: var(--muted); font-size: 0.9688rem; }
.dl-tag { margin-left: 8px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; font: 700 0.75rem/1.4 var(--text); color: var(--muted); vertical-align: middle; }
.dl-tag-stage { border-color: transparent; background: #f2c744; color: #1b1400; font-weight: 700; }
.dl-stage { max-width: 46rem; margin: 0 0 18px; padding: 10px 14px; border: 1px solid var(--line); border-left: 4px solid #f2c744; border-radius: 8px; background: var(--surface); color: var(--muted); }
.dl-stage strong { color: var(--ink); }
.dl-get { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.dl-file { font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
a.dl-file { color: var(--link); }
.dl-size { color: var(--muted); font-size: 0.875rem; white-space: nowrap; }
.dl-card code, .dl-verify code { font: 0.8125rem/1.5 ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; overflow-wrap: anywhere; }
.dl-line code { display: block; padding: 6px 8px; }
.dl-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 0 !important; }
.dl-sum-label { font-weight: 700; font-size: 0.8125rem; color: var(--ink); }
.dl-sum code { flex: 1 1 16rem; min-width: 0; }
.dl-aur { margin-top: 10px !important; }
.dl-aur .dl-sum-label { min-width: 4.2em; color: var(--link); }
.dl-aur-note { margin: 4px 0 0 !important; font-size: 0.8125rem; color: var(--muted, inherit); }
.dl-copy { font: 700 0.8125rem/1 var(--text); color: var(--link); background: none; border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; cursor: pointer; }
.dl-copy:hover { border-color: var(--link); }
.dl-copy.done { color: var(--ink); border-color: var(--ink); }
.dl-limits-title { margin-top: 12px !important; color: var(--ink) !important; font-weight: 700; }
.dl-limits { margin: 0; padding-left: 1.2rem; color: var(--muted); font-size: 0.9375rem; }
.dl-limits li { margin: 2px 0; }
.dl-verify { margin-top: 20px; }
.dl-verify h3 { font: 700 1.125rem/1.2 var(--display); margin: 0 0 6px; }
.dl-verify p { color: var(--muted); margin: 0 0 8px; max-width: 46rem; }
.dl-verify i { font-style: italic; }
@media (max-width: 760px) { .dl-files { grid-template-columns: 1fr; } }

/* press / media kit (index.html #press; the files in press/ are made by tools/presskit.py) */
.press-all { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 24px; }
.press-all-note { color: var(--muted); font-size: 0.9375rem; }
.press-texts { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; margin-bottom: 24px; }
.press-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; min-width: 0; display: flex; flex-direction: column; }
.press-card h3, .press-h { font: 700 1.125rem/1.2 var(--display); margin: 0 0 8px; }
.press-card p { margin: 0 0 10px; color: var(--muted); font-size: 0.9688rem; }
.press-card .press-copy { margin: auto 0 0; }
.press-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 32px; margin: 0 0 32px; max-width: 60rem; }
.press-facts div { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.press-facts dt { flex: none; width: 8.5em; font-weight: 700; }
.press-facts dd { margin: 0; color: var(--muted); min-width: 0; overflow-wrap: break-word; }
.press-h { margin-top: 8px; }
.press-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; margin-bottom: 32px; }
.press-logo { width: 168px; height: 168px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line); }
.press-logo.light { background: #ffffff; }
.press-logo.dark { background: #161616; }
.press-logo img { width: 112px; height: 112px; }
.press-logo-links { margin: 0; color: var(--muted); font-size: 0.9375rem; }
.press-note { color: var(--muted); margin: 0 0 14px; max-width: 46rem; }
.press-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.press-shot { display: block; text-decoration: none; color: var(--ink); }
.press-shot img { border-radius: 8px; border: 1px solid var(--line); }
.press-shot span { display: block; margin-top: 6px; font-weight: 700; font-size: 0.9375rem; }
.press-shot:hover img { border-color: var(--link); }
@media (max-width: 760px) {
  .press-texts, .press-facts { grid-template-columns: 1fr; }
  .press-facts dt { width: 6.8em; }
  .press-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}