:root { color-scheme: light dark; --canvas: #F7F5F1; --surface: #FFFFFF; --ink: #111716; --ink-2: #56605E;
  --brand: #0A767C; --brand-solid: #0A767C; --on-brand: #FFFFFF; --line: rgba(17,23,22,.16); --field-line: #7A8482; --note: #6A4E00; --note-bg: #FFF6DB; }
@media (prefers-color-scheme: dark) { :root { --canvas: #0B0F10; --surface: #161B1D; --ink: #ECF1F0; --ink-2: #9BA5A3;
  --brand: #4FD6DC; --brand-solid: #1BAAB0; --on-brand: #04201F; --line: rgba(237,242,241,.2); --field-line: #717C7A; --note: #F3D98A; --note-bg: #2A2410; } }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 1.0625rem/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }
img { max-width: 100%; height: auto; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 1; background: var(--surface); color: var(--brand); padding: .7rem 1rem;
  border-radius: .75rem; border: 1px solid var(--line); min-height: 44px; }
.skip:focus { top: .5rem; }
.brand { max-width: 64rem; margin: 0 auto; padding: .75rem 1.25rem; }
.brand a { display: inline-flex; align-items: center; gap: .6rem; color: var(--brand); font-weight: 600; text-decoration: none; min-height: 44px; }
.brand img { width: 32px; height: 32px; border-radius: 22%; display: block; }
main { max-width: 38rem; margin: 0 auto; padding: 0 1.25rem 2rem; }
main.wide { max-width: 64rem; }
h1 { font-size: 1.75rem; line-height: 1.25; margin: .5rem 0 1rem; }
h2 { font-size: 1.2rem; margin: 2rem 0 .5rem; }
p, li { max-width: 36rem; }
a { color: var(--brand); }
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.card { background: var(--surface); border-radius: 1rem; padding: 1.25rem; margin: 1rem 0; border: 1px solid var(--line); }
.cover { width: 100%; max-height: 22rem; object-fit: cover; border-radius: 1rem; display: block; }
.from { color: var(--ink-2); }
label { display: block; font-weight: 600; margin: 1.25rem 0 .35rem; }
.hint { display: block; color: var(--ink-2); font-size: .95rem; margin: -.15rem 0 .4rem; }
input[type=text], textarea { width: 100%; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--field-line);
  border-radius: .75rem; padding: .7rem .8rem; min-height: 44px; }
textarea { min-height: 9rem; resize: vertical; }
input[type=file] { font: inherit; min-height: 44px; max-width: 100%; }
input:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.note { display: block; background: var(--note-bg); color: var(--note); border-radius: .75rem; padding: .6rem .8rem; margin: .4rem 0; }
button { font: inherit; font-weight: 600; color: var(--on-brand); background: var(--brand-solid); border: 0; border-radius: 999px;
  padding: .8rem 1.5rem; min-height: 48px; width: 100%; margin-top: 1.5rem; cursor: pointer; }
footer { max-width: 38rem; margin: 0 auto; padding: 1rem 1.25rem 2.5rem; color: var(--ink-2); border-top: 1px solid var(--line); }
main.wide + footer { max-width: 64rem; }
footer nav { display: flex; flex-wrap: wrap; column-gap: 1.25rem; }
footer a { display: inline-block; min-height: 44px; line-height: 44px; overflow-wrap: anywhere; }
footer p { margin: .5rem 0 0; font-size: .95rem; }
/* Home */
.dedication { text-align: center; padding: 2rem 0 2.5rem; }
.portrait { width: 10rem; height: 10rem; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 1.25rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.dedication h1 { font-size: 2.25rem; margin: 0 0 .35rem; color: var(--brand); }
.dedication p { margin: .25rem auto; }
.dedication .words { color: var(--ink-2); }
.dedication .years { color: var(--ink-2); font-size: .95rem; font-variant-numeric: tabular-nums; margin-top: .5rem; }
.dedication .free { color: var(--ink-2); font-size: .95rem; margin-top: 1rem; }
.app { text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: 1.5rem; padding: 2rem 1.25rem; margin: 0 auto 1rem; max-width: 38rem; }
.app-icon { width: 6rem; height: 6rem; border-radius: 22%; display: block; margin: 0 auto 1rem; }
.app h2 { margin: 0 0 .25rem; font-size: 1.5rem; }
.app p { margin: 0 auto 1.25rem; color: var(--ink-2); }
.store { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .8rem 1.5rem; border-radius: 999px;
  background: var(--brand-solid); color: var(--on-brand); font-weight: 600; text-decoration: none; }
.store:hover { text-decoration: underline; }
.features h2, .screens h2 { text-align: center; margin-top: 2.5rem; }
.grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.grid .card { margin: 0; flex: 1 1 17rem; max-width: calc((100% - 2rem) / 3); min-width: min(100%, 17rem); }
@media (max-width: 56rem) { .grid .card { max-width: 100%; } }
.grid .card h3 { font-size: 1.1rem; margin: 0 0 .4rem; }
.grid .card p { margin: 0; color: var(--ink-2); }
.shots { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 48rem) { .shots { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.shots img { display: block; width: 100%; border-radius: 1rem; border: 1px solid var(--line); }
.legal h2 { margin-top: 2.25rem; }
.approval { color: var(--ink-2); font-size: .95rem; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }