/* Source Serif 4 (SIL Open Font License), served from this site: no other origin before the page paints. */
@font-face{font-family:'Source Serif 4';font-style: italic; font-weight: 400; font-display: swap; src:url(/fonts/source-serif-4-italic-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Source Serif 4';font-style: italic; font-weight: 400; font-display: swap; src:url(/fonts/source-serif-4-italic-latin.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:'Source Serif 4';font-style: normal; font-weight: 300 800; font-display: swap; src:url(/fonts/source-serif-4-normal-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Source Serif 4';font-style: normal; font-weight: 300 800; font-display: swap; src:url(/fonts/source-serif-4-normal-latin.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;}
/*
 * The website's own pages (blog, guides, FAQ, legal, download). Since 2026-10-20 in the desktop app's look,
 * as app.css (the owner: "make the theme like the desktop app's modernistic theme"): Source Serif 4, the
 * warm light-grey ground between a white bar on top and a white footer, white cards with a visible edge and
 * 16px corners, black for the thing to press, blue for links. Light by default; html.dark when chosen in the
 * More menu (boot.js). The colours are app.css's, measured for contrast there (2026-10-21).
 */
:root{
  --radius:12px;--radius-xl:16px;
  --bg:#efeeea;--card:#fff;--fg:#111;--soft:#333;--muted:#575757;
  --primary:#111;--primary-fg:#fff;--secondary:#e8e7e2;--hover:#ebeae5;--accent:#e2e1dc;--strip:#f3f2ee;
  --border:#d6d4ce;--input:#85837e;--blue:#1d4ed8;--ring:rgb(29 78 216/.3);
  --shadow-card:0 1px 3px rgb(0 0 0/.07);--shadow:0 10px 30px rgb(0 0 0/.14),0 2px 6px rgb(0 0 0/.08);color-scheme:light
}
html.dark{
  --bg:#0c0c0c;--card:#1c1c1c;--fg:#f4f4f4;--soft:#d4d4d4;--muted:#a8a8a8;
  --primary:#f4f4f4;--primary-fg:#111;--secondary:#2c2c2c;--hover:#292929;--accent:#353535;--strip:#252525;
  --border:#3a3a3a;--input:#787878;--blue:#6ea8ff;--ring:rgb(110 168 255/.35);
  --shadow-card:0 1px 2px rgb(0 0 0/.4);--shadow:0 10px 30px rgb(0 0 0/.6);color-scheme:dark
}
*,::before,::after{box-sizing:border-box;margin:0;padding:0;border:0 solid var(--border)}
html{font-family:"Source Serif 4",Georgia,serif;line-height:1.55;-webkit-text-size-adjust:100%;background:var(--bg)}
body{background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration:inherit}
button{font:inherit;color:inherit;background:none;cursor:pointer}
svg{display:block}
b,strong{font-weight:600}
sup{font-size:.6em;line-height:0}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
::selection{background:color-mix(in srgb,var(--blue) 25%,transparent)}
.mono{font-variant-numeric:tabular-nums}
.sys{font-family:inherit}
html.dark .nav img,html.dark .menu img{filter:invert(1)}

.c{width:100%;min-width:100%;margin-inline:auto;padding-inline:1.25rem}
@media(min-width:640px){.c{max-width:640px;min-width:calc(640px - 2em)}}
@media(min-width:768px){.c{max-width:768px;min-width:calc(768px - 2em)}}
@media(min-width:1024px){.c{max-width:1024px;min-width:calc(1024px - 2em)}}
@media(min-width:1280px){.c{max-width:1200px;min-width:calc(1200px - 2em)}}

/* The bar on top: the name, the menus, and Download as the one black button. */
.nav{position:absolute;top:0;left:0;right:0;z-index:50;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;height:68px;border-bottom:1px solid var(--border);background:var(--card);color:var(--fg);user-select:none}
.links{position:relative;grid-column:2;display:none;justify-self:end;align-items:center;gap:1.75rem;font-size:15px;font-weight:500}
.links a:not(.dl):hover{text-decoration:underline;text-underline-offset:4px}
.dl{display:inline-flex;align-items:center;min-height:36px;padding:0 16px;border-radius:var(--radius);background:var(--primary);color:var(--primary-fg);font-size:14px;font-weight:600;transition:opacity .15s}
.dl:hover{opacity:.85}
.burger{grid-column:2;justify-self:end;display:flex}
.burger svg,.close svg{width:32px;height:32px}
.menu{position:fixed;inset:0;z-index:60;background:var(--bg);color:var(--fg);transform:translateY(100%);visibility:hidden;transition:transform .4s cubic-bezier(.3,1.1,.4,1),visibility 0s .4s}
.open .menu{transform:none;visibility:visible;transition:transform .4s cubic-bezier(.3,1.1,.4,1)}
.open{overflow:hidden}
.close{position:absolute;top:18px;right:18px}
.menu ul{display:flex;flex-direction:column;gap:1rem;margin:30% 0 0 12%;list-style:none;font-size:30px;font-weight:600}
@media(prefers-reduced-motion:reduce){.menu,.open .menu{transition:none}}

/* The one black button of a page's text. */
.cta{display:flex;margin-top:2rem}
.cta a{display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border-radius:var(--radius);background:var(--primary);color:var(--primary-fg);font-size:15px;font-weight:600;transition:opacity .15s}
.cta a:hover{opacity:.85}
.cta+p{margin-top:1.25rem;color:var(--muted)}
.arrow{flex:none;align-self:center;width:.9em;height:.9em;margin:0 0 0 .5rem;transition:transform .15s cubic-bezier(.4,0,.2,1)}
.cta:hover .arrow{transform:translateX(.25rem)}
@media(prefers-reduced-motion:reduce){.arrow{transition:none}}

.white{background:var(--bg)}
.label{font-size:26px;font-weight:600;line-height:1.35;letter-spacing:-.01em;text-wrap:balance;user-select:none}

footer{border-top:1px solid var(--border);background:var(--card)}
.fc{display:flex;align-items:center;height:100%;padding:3rem 1.25rem 4rem;color:var(--muted)}
.fg{display:flex;flex-direction:column;row-gap:2.5rem;align-items:start;width:100%}
.fcol{display:flex;flex-direction:column;row-gap:1rem}
.fnav{display:flex;flex-direction:column;row-gap:.4rem}
.fh{padding-bottom:.25rem;color:var(--fg);font-size:20px;font-weight:600;line-height:1.4}
.fmail{width:fit-content;color:var(--blue);font-size:min(18px,5vw);overflow-wrap:anywhere}
.fmail:hover{text-decoration:underline}
.fcopy{font-size:14px}
.flink{width:fit-content;font-size:15px}
.flink:hover,.fh a:hover{color:var(--fg);text-decoration:underline;text-underline-offset:3px}

/* Tips to get a better job: long reads, at a comfortable size and measure. */
.tip{max-width:44rem;font-size:18px;line-height:1.7}
.tip>*+*{margin-top:1.1rem}
.tip h2{margin-top:2.75rem;font-size:26px;font-weight:600;line-height:1.25;letter-spacing:-.01em}
.tip h3{margin-top:2rem;font-size:20px;font-weight:600;line-height:1.3}
.tip ul,.tip ol{padding-left:1.4em}
.tip li+li{margin-top:.45rem}
.tip a{color:var(--blue)}
.tip a:hover{text-decoration:underline}
.tip blockquote{padding:.25rem 0 .25rem 1.1rem;border-left:3px solid var(--border);color:var(--soft)}
.tip strong{font-weight:600}
.tip-cta{max-width:44rem;padding:1.75rem 1.75rem 1.5rem;border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--card);box-shadow:var(--shadow-card)}
.tip-cta p{font-size:20px;font-weight:600;line-height:1.4}
.tip-cta .cta{margin-top:1.25rem}
.more-tips{max-width:44rem}
.more-tips h2{font-size:22px;font-weight:600}
.more-tips ul{display:flex;flex-direction:column;gap:.6rem;margin-top:1rem;list-style:none}
.more-tips a{color:var(--blue);font-size:17px}
.more-tips a:hover{text-decoration:underline}
/* The blog (the owner, 2026-10-05): one part per section, each a heading over its articles. */
.blog-part+.blog-part{margin-top:4rem}
.blog-part .label{margin-bottom:1.5rem}
.blog-part .label a:hover{text-decoration:underline;text-underline-offset:4px}
a.qi:hover .q{text-decoration:underline;text-underline-offset:4px}

/* A page's title, on the ground over a rule (legal pages, FAQ, the blog's own pages). */
.title{display:flex;padding-top:68px;border-bottom:1px solid var(--border);background:var(--bg);color:var(--fg)}
.title>.c{align-self:center;height:fit-content;padding-block:3rem 2.5rem}
.title h1{font-size:36px;font-weight:600;line-height:1.2;letter-spacing:-.015em}
.title p{max-width:760px;padding-top:.75rem;color:var(--muted);font-size:17px;line-height:1.6}
.doc{display:flex;flex-direction:column;row-gap:2.5rem;padding-block:3rem 4rem}
.intro{display:flex;flex-direction:column;gap:1rem;max-width:760px;font-size:17px}
.qa{display:flex;flex-direction:column;gap:2rem}
.qi{display:flex;flex-direction:column;row-gap:1rem;padding:1.25rem 1.5rem 0;border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--card);box-shadow:var(--shadow-card)}
.q{font-size:21px;font-weight:600;line-height:1.35}
.a{display:flex;flex-direction:column;gap:.85rem;padding-bottom:1.5rem;font-size:16px}
.a h3{margin-top:.5rem;font-size:17px;font-weight:600}
.a ul{display:flex;flex-direction:column;gap:.45rem;padding-left:1.25em}
.a a,.intro a,.title p a{color:var(--blue)}
.a a:hover,.intro a:hover,.title p a:hover{text-decoration:underline}
.caps{text-transform:uppercase}

@media(min-width:640px){
.links{display:flex}.burger{display:none}
footer{min-height:320px}.fc{padding-block:3.5rem}.fg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.menu ul{margin-top:20%}}
@media(min-width:768px){.title h1{font-size:44px}}
@media(min-width:1024px){
.title h1{font-size:48px}
.doc{padding-block:4.5rem}
.qa{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.fc{padding-inline:2rem}.fg{grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));column-gap:2.5rem}}