/* The look is Telegram's, and so is the blue: plain white, black text, a single
   accent, generous measure - the site should read like the app it belongs to
   and get out of the way. */

/* The accent is darker than the mark's. #0088ff is the brand blue and sits at
   3.52:1 against white, under the 4.5:1 that normal text needs; this one keeps
   its hue and reaches 5.24:1 - the same contrast the green it replaces had, so
   nothing about the page's weight changes with its colour. */
:root {
    --accent: #006ccb;
    --accent-hover: #00549d;
    --frost: #006ccb;
    --ink: #000000;
    --ink-soft: #666e78;
    --paper: #ffffff;
    --line: #e6ecf0;
    --band: #f4f4f5;
}

@media (prefers-color-scheme: dark) {
    :root {
        --accent: #3599f0;
        --accent-hover: #47a9ff;
        --frost: #7cc0ff;
        --ink: #f5f5f5;
        --ink-soft: #8d949c;
        --paper: #212121;
        --line: #303030;
        --band: #1a1a1a;
    }
}

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0 1.25rem 4rem;
    background: var(--paper);
    color: var(--ink);
    font: 1rem/1.55 -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", Helvetica, Arial, sans-serif;
}

main {
    max-width: 40rem;
    margin: 0 auto;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

/* The mark: the block of ice with the nine in it, the same drawing the launcher
   icon uses. An image rather than two rectangles in CSS, because the shape is
   no longer something two rectangles can say. */
.mark {
    display: block;
    width: 5rem;
    height: 5rem;
    margin: 3.5rem auto 1.5rem;
    border-radius: 1.2rem;
    background: url("/mark.png") center / cover no-repeat;
}

.home {
    text-align: center;
}

h1 {
    font-size: 2.1rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0 0 0.5rem;
}

h2 {
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.35;
    margin: 2.4rem 0 0.6rem;
}

p,
li {
    margin: 0 0 0.85rem;
}

.lede {
    font-size: 1.15rem;
    color: var(--ink-soft);
    margin-bottom: 2.5rem;
}

.updated {
    color: var(--ink-soft);
    font-size: 0.9rem;
    margin: -0.2rem 0 2.5rem;
}

ul {
    padding-left: 1.2rem;
    margin: 0 0 0.85rem;
}

li {
    margin-bottom: 0.4rem;
}

/* A sentence that carries more weight than the paragraph around it. */
.plain {
    background: var(--band);
    border-left: 3px solid var(--accent);
    padding: 0.85rem 1rem;
    margin: 1.4rem 0;
    border-radius: 0 4px 4px 0;
}

.plain p:last-child {
    margin-bottom: 0;
}

nav {
    margin-top: 3.5rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--line);
    font-size: 0.94rem;
    color: var(--ink-soft);
}

nav a {
    margin-right: 1.2rem;
    display: inline-block;
    margin-bottom: 0.4rem;
}

.home nav a {
    margin: 0 0.6rem 0.4rem;
}

.back {
    display: inline-block;
    margin: 2.5rem 0 1.2rem;
    font-size: 0.94rem;
}

/* Coming soon: the line that says why there is nothing to download yet. It was
   a filled pill, which on a page whose only other filled things were links read
   as something to press - and pressing it did nothing, because it is a statement
   and not a control. So it is what it always was: a sentence, said loudly.
   Larger than the name above it, because on this page it is the news. */
.soon {
    font-size: 2.6rem;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--accent);
    margin: 0.4rem 0 1rem;
}

/* The frost grows out of the mark and behind everything else. Fixed, so it
   does not scroll away from the icon it belongs to, and deaf to the pointer:
   it is weather, not furniture.

   At z-index -1 it was invisible even once the browser was allowed to draw it:
   a negative layer goes behind the body's background, not merely behind the
   text, and the body has one. So it sits at zero and the words sit above it. */
#frost {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

main {
    position: relative;
    z-index: 1;
}

/* Off the picture, still on the page. The name is the one thing the mark
   already says, so on the home page it is a repetition to the eye - but a
   screen reader has no mark to look at, and a page with no h1 at all is one a
   search engine and a reading order both stumble over. Clipped rather than
   display:none, because display:none is not read out either. */
.offscreen {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}