/* Urth's site, in the look of its shared-note and Write pages: the app's light and dark, the system
   sans for reading, monospace for the name, the headings and anything that is Markdown. */
/* Until a theme is picked on the site: Flexoki Light and Flexoki Dark (the site's earlier own palette was
   fbf6ea-3b3a36-c4487a-2a7ab0-f3d36b and 1d1e26-dcd9d0-e07aa2-79b8e0-b39b3a, if it's wanted back). */
:root { --bg: #fffcf0; --text: #100f0f; --accent: #a02f6f; --link: #205ea6; --highlight: #ad8301; }
@media (prefers-color-scheme: dark) { :root { --bg: #100f0f; --text: #cecdc3; --accent: #ce5d97; --link: #4385be; --highlight: #d0a215; } }
:root { --soft: color-mix(in srgb, var(--text) 50%, var(--bg)); --faint: color-mix(in srgb, var(--text) 12%, var(--bg));
        --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --sans: -apple-system, system-ui, "Helvetica Neue", sans-serif; }
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
main { max-width: 42rem; margin: 0 auto; padding: 3.5rem 1.25rem 4rem; }
h1, h2, h3 { font-family: var(--mono); line-height: 1.3; }
h1 { font-size: 1.5rem; margin: 0 0 1.25rem; }
h2 { font-size: 1.05rem; margin: 2.5rem 0 0.6rem; }
h3 { font-size: 0.95rem; margin: 1.8rem 0 0.4rem; }
p, li { overflow-wrap: anywhere; }
ul { padding-left: 1.4em; }
li { margin: 0.25em 0; }
li::marker { color: var(--accent); }
a { color: var(--link); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--link) 35%, transparent); }
a:hover { border-bottom-color: var(--link); }
/* Anything that is Markdown reads in the editor's face. */
code, kbd, .md { font: 0.86em/1.5 var(--mono); background: color-mix(in srgb, var(--text) 8%, var(--bg)); padding: 0.05em 0.35em; border-radius: 4px; }
kbd { border: 1px solid var(--faint); }
hr { border: 0; border-top: 1px solid var(--faint); margin: 2.5rem 0; }
.soft { color: var(--soft); }
.mark { color: var(--soft); }
.small { font-size: 0.875rem; }
nav.top { display: flex; flex-wrap: wrap; gap: 0.5em 1.4em; margin: 0 0 2.5rem; font-size: 0.875rem; }
nav.top a { color: var(--soft); border: 0; }
nav.top a:hover, nav.top a[aria-current] { color: var(--text); }
nav.top a:first-child, footer a:first-child { font-family: var(--mono); font-weight: 700; }   /* the name, in its own face */
footer { margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--faint); font-size: 0.875rem; display: flex; flex-wrap: wrap; gap: 0.5em 1.4em; }
footer a { color: var(--soft); border: 0; }
footer a:hover { color: var(--text); }
footer .copyright { margin-left: auto; color: var(--soft); }
.button { display: inline-block; background: var(--accent); color: var(--bg); border: 0; padding: 0.5em 1em; border-radius: 999px; font: 600 14px/1.6 var(--sans); white-space: nowrap; }
.button:hover { filter: brightness(1.08); border: 0; }
.plain { display: inline-block; background: none; border: 1px solid var(--faint); color: var(--text); padding: 0.45em 0.9em; border-radius: 999px; font: 14px/1.6 var(--sans); cursor: pointer; }
.plain:hover { border-color: var(--soft); }

/* The home page: the planet, its stars blinking now and then, and one sentence. */
.home { min-height: 100vh; display: flex; flex-direction: column; }
.home .planet { margin-top: 2rem; }
.planet { position: relative; width: 168px; height: 168px; margin: 0 0 2rem; image-rendering: pixelated; }
.planet img { display: block; width: 100%; height: 100%; border-radius: 22%; }
.planet .star { position: absolute; width: 3.3%; height: 3.3%; background: #d8d8d8; opacity: 0.85; animation: blink 7s infinite; }
.planet .star:nth-child(2) { left: 55.2%; top: 8.3%; animation-delay: 0s; }
.planet .star:nth-child(3) { left: 85%; top: 11.7%; animation-delay: 2.3s; animation-duration: 9s; }
.planet .star:nth-child(4) { left: 15.1%; top: 18.1%; animation-delay: 4.1s; animation-duration: 11s; }
.planet .star:nth-child(5) { left: 88.4%; top: 81.5%; animation-delay: 6.2s; animation-duration: 8s; }
@keyframes blink { 0%, 93%, 100% { opacity: 0.85; } 95%, 97% { opacity: 0.05; } }
@media (prefers-reduced-motion: reduce) { .planet .star { animation: none; } }
.home h1 { font-size: 2rem; margin-bottom: 1rem; }
.lead { font-size: 1.25rem; line-height: 1.55; margin: 0 0 1.25rem; max-width: 30rem; }
.lead b { font-weight: 600; }
.home p { max-width: 34rem; }
.home .features { max-width: 32rem; padding-left: 1.2em; margin: 0.5rem 0 0; }
.home .features li { margin: 0.5em 0; }
.home .features b { font-weight: 600; }
.home .actions { margin: 2rem 0 0; display: flex; flex-wrap: wrap; gap: 1em; align-items: center; }
.home .actions .soft { font-size: 0.875rem; }

/* Help: Markdown shown as the app shows it. */
.example { display: block; margin: 0.4em 0 1em; padding: 0.8em 1em; border: 1px solid var(--faint); border-radius: 10px; white-space: pre-wrap; font: 0.9375rem/1.7 var(--mono); }
.example .m { color: var(--soft); }
.example .h { font-weight: 700; }
.example .l { color: var(--link); }
.example .t { color: var(--accent); }
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 0.9375rem; border: 1px solid var(--faint); border-radius: 8px; overflow: hidden; margin: 0.6em 0 1.2em; }
th, td { text-align: left; padding: 0.35em 0.7em; border-bottom: 1px solid var(--faint); vertical-align: top; }
td:first-child { font-family: var(--mono); font-size: 0.9em; }
th { background: color-mix(in srgb, var(--text) 6%, var(--bg)); font-weight: 600; }
tr:last-child td { border-bottom: 0; }
td:first-child { white-space: nowrap; }
.bookmarklet { display: inline-block; padding: 0.6em 1.1em; border: 2px dashed var(--accent); border-radius: 999px; color: var(--text); font: 600 1rem var(--mono); cursor: grab; }
pre.license { white-space: pre-wrap; font: 0.8125rem/1.6 var(--mono); color: var(--soft); }