/* A17 Cooldown: the website, in the app's neon look (ios/Core/Neon.swift, ios/Style/Theme.swift):
   a black page ruled with a faint cyan grid, panels with the top-left and bottom-right corners cut
   off and a hairline of cyan, titles in DIN Condensed capitals, text in Avenir Next Condensed,
   readouts in Menlo. A glow is a wider, fainter stroke, never a blur or a shadow. Colours are kept
   as "R G B" so that each one can also be laid down as a faint wash. No font is loaded: every
   stack falls back to a condensed face the device already has. */
:root {
  --black: 7 6 13; --panel: 16 14 28; --raised: 27 24 50; --white: 234 246 255; --soft: 178 186 218; --gray: 140 147 184; --dim: 74 79 115;
  --cyan: 25 240 255; --pink: 255 46 151; --yellow: 255 211 25; --violet: 155 92 255; --mint: 61 255 168; --amber: 255 154 31;
  --display: "DIN Condensed", Bahnschrift, "Roboto Condensed", sans-serif-condensed, "Arial Narrow", Arial, sans-serif;
  --text: "Avenir Next Condensed", Bahnschrift, "Roboto Condensed", sans-serif-condensed, "Arial Narrow", Arial, sans-serif;
  --mono: Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace;
  --t: var(--cyan);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: rgb(var(--black)); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; color: rgb(var(--white));
  /* The ruling of the page, as the app draws it: a 36-point tile with two hairlines and a brighter
     corner. Under it, one glow at the top in the colour of the heat. */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cpath d='M0 0h36v1H0zM0 1h1v35H0z' fill='%2319F0FF' fill-opacity='.06'/%3E%3Cpath d='M0 0h2v2H0z' fill='%2319F0FF' fill-opacity='.2'/%3E%3C/svg%3E"),
    radial-gradient(ellipse min(110vw, 760px) 420px at 50% 0, rgb(var(--glow, var(--cyan)) / .2), rgb(var(--glow, var(--cyan)) / 0)) no-repeat,
    rgb(var(--black));
  font: 18px/1.45 var(--text); font-stretch: condensed;
}
body[data-state="missing"], body[data-state="lost"] { --glow: var(--pink); }
main { max-width: 620px; margin: 0 auto; padding: 26px 22px 64px; }
main.wide { max-width: 1060px; }
.defs { position: absolute; width: 0; height: 0; }

/* The cut panel. Clipping takes the two corners off; the two gradients redraw the hairline along
   each cut, where the border was clipped away with the corner. */
.card, .panel, .screen, .tile, .face, .quiet, .code {
  --line: rgb(var(--t) / var(--strength, .24));
  border: var(--hair, 1px) solid var(--line);
  background:
    linear-gradient(135deg, var(--line) calc(var(--cut) * .7071 + var(--hair, 1px)), transparent 0) border-box,
    linear-gradient(315deg, var(--line) calc(var(--cut) * .7071 + var(--hair, 1px)), transparent 0) border-box,
    linear-gradient(rgb(var(--t) / var(--wash, 0)), rgb(var(--t) / var(--wash, 0))) border-box,
    rgb(var(--fill, var(--panel))) border-box;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}

/* Words */
.brand { display: inline-flex; align-items: center; gap: 12px; font: 700 21px/1 var(--display); letter-spacing: .34em; text-transform: uppercase; color: rgb(var(--white)); text-decoration: none; padding-top: .16em; }
.mark { width: 40px; height: 28px; flex: none; margin-top: -.16em; }
h1, h2, h3, .button, .quiet { font-family: var(--display); font-weight: 700; text-transform: uppercase; }
h1 { font-size: clamp(46px, 13.4vw, 88px); line-height: .94; letter-spacing: .03em; margin: 30px 0 16px; padding-top: .1em; overflow-wrap: anywhere; }
h2 { display: flex; align-items: center; gap: 10px; font-size: 23px; line-height: 1.05; letter-spacing: .07em; margin: 46px 0 14px; padding-top: .14em; }
h2::before { content: "//"; content: "//" / ""; font: 700 14px/1 var(--mono); letter-spacing: 0; color: rgb(var(--mark, var(--cyan))); margin-top: -.3em; }
h2::after { content: ""; flex: 1; min-width: 20px; height: 1px; background: rgb(var(--cyan) / .24); margin-top: -.3em; }
h3 { font-size: 21px; line-height: 1.08; letter-spacing: .06em; margin: 0 0 6px; padding-top: .14em; }
p { margin: 0 0 14px; }
a { color: rgb(var(--cyan)); text-underline-offset: 3px; }
.soft { color: rgb(var(--soft)); }
.readout, footer { font: 12px/1.5 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: rgb(var(--gray)); }
.readout::before { content: "> "; content: "> " / ""; color: rgb(var(--mint)); }

/* The top of every page: the name, and the pages as the app draws its tab bar */
.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.tabs { display: flex; padding: 3px; background: rgb(var(--raised)); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.tabs a { flex: 1; padding: calc(9px + .16em) 13px 9px; font: 700 16px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; text-align: center; white-space: nowrap; color: rgb(var(--gray)); text-decoration: none; }
.tabs a:hover, .tabs a:focus-visible { color: rgb(var(--white)); outline: 0; }
.tabs a[aria-current] { color: rgb(var(--black)); background: rgb(var(--cyan)); clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }

/* The first screen: what the app says, beside the phone's own face */
.hero { display: grid; gap: 4px; margin-top: 22px; }
.hero h1 { margin-top: 22px; }
.hero .soft { font-size: 20px; line-height: 1.4; max-width: 30em; margin: 0; }
.screen { --cut: 22px; --fill: var(--black); position: relative; order: -1; aspect-ratio: 8 / 5; }
.screen svg { display: block; width: 100%; height: 100%; }
/* The lines of an old tube screen: one faint row in four. */
.screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(rgb(255 255 255 / .035) 0 1px, transparent 1px 4px); }
/* The face lives through a day in twenty seconds: cool and awake, warm and sleepy, overheating
   while the glass cracks, then asleep while the heat drains. site.js sets data-mood, and each change
   is one short transition, so the page paints nothing in between (the app's own rule: nothing moves
   while it is idle). Without the script, or for anyone who asked for less motion, the cool face stays. */
.mood { opacity: 0; transition: opacity .5s; }
[data-mood="calm"] .calm, [data-mood="sleepy"] .sleepy, [data-mood="angry"] .angry, [data-mood="asleep"] .asleep { opacity: 1; }
.heat { fill: rgb(var(--cyan)); transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(.14); transition: transform 1.2s ease-out, fill .5s; }
[data-mood="sleepy"] .heat { fill: rgb(var(--yellow)); transform: scaleX(.56); }
[data-mood="angry"] .heat { fill: rgb(var(--pink)); transform: scaleX(.88); }
[data-mood="asleep"] .heat { fill: rgb(var(--violet)); transition-duration: 3.6s, .5s; transition-timing-function: ease-in-out; }
.crack { opacity: 0; stroke-dasharray: 1; stroke-dashoffset: 1; transition: opacity .5s, stroke-dashoffset 0s .5s; }
[data-mood="angry"] .crack { opacity: 1; stroke-dashoffset: 0; transition: opacity .1s, stroke-dashoffset 1.1s ease-out; }
.blink { transform-box: fill-box; transform-origin: center; transition: transform .11s; }
.shut .blink { transform: scaleY(.06); }
.zed:nth-of-type(1) { opacity: .45; } .zed:nth-of-type(2) { opacity: .75; }

/* Panels */
.panel { --cut: 14px; --strength: 1; --hair: 1.5px; --wash: .14; padding: 20px 20px 18px; margin: 30px 0 0; }
.panel p { margin: 0; font-size: 18px; line-height: 1.42; }
.panel.dock { display: grid; gap: 14px; }
.dock svg { display: block; width: 100%; height: auto; max-width: 420px; margin: 0 auto; }
.card { --cut: 12px; padding: 16px 18px; margin: 10px 0; }
.card p { margin: 0; color: rgb(var(--soft)); font-size: 17px; line-height: 1.42; }
.card.pic { display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; align-content: start; }
.card.pic > h3 { grid-column: 2; align-self: center; margin: 0; }
.card.pic > p { grid-column: 1 / -1; margin-top: 12px; }
.tile, .face { --cut: 10px; --strength: 1; --hair: 1.5px; --wash: .12; width: 52px; height: 52px; display: grid; place-items: center; color: rgb(var(--t)); }
.tile svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tile .halo { stroke-width: 5.5; stroke-opacity: .2; }
.grid { display: grid; gap: 10px; }
.grid .card { margin: 0; }
.grid + .grid, .join + .grid { margin-top: 10px; }

/* A rule in one number, and a drawing in a panel */
.rule { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 16px; }
.rule b { font: 700 44px/1 var(--display); letter-spacing: .02em; white-space: nowrap; color: rgb(var(--t)); padding-top: .16em; min-width: 1.5em; }
.rule p { color: rgb(var(--white)); font-size: 18px; }
.figure { --wash: .08; --strength: .5; --hair: 1px; margin: 22px 0 0; padding: 18px; }
.figure svg { display: block; width: 100%; height: auto; max-width: 460px; margin: 0 auto; }
.scale .tick { font: 11px var(--mono); fill: rgb(var(--gray)); }
.scale .level { font: 700 16px var(--display); letter-spacing: .06em; text-transform: uppercase; }
.mail { font: 700 17px var(--mono); white-space: nowrap; }

/* Actions. The solid bar is a tube: the fill, and a wider, fainter outline as its halo. */
.button { --cut: 14.3px; position: relative; isolation: isolate; display: block; width: 100%; margin: 18px 0 8px; padding: calc(19px + .16em) 26px 19px; border: 0; cursor: pointer; text-align: center; text-decoration: none; font-size: 21px; line-height: 1; letter-spacing: .09em; color: rgb(var(--black)); background: rgb(var(--t) / .28); clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); transition: transform .1s, background-color .15s; }
.button::before { content: ""; position: absolute; inset: 4px; z-index: -1; background: rgb(var(--t)); clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.button:hover { background: rgb(var(--t) / .5); }
.button:focus-visible, .quiet:focus-visible { outline: 0; background: rgb(var(--white)); }
.quiet:focus-visible { color: rgb(var(--black)); }
.button:active { transform: scale(.985); }
.quiet { --cut: 7px; --strength: .8; --wash: .08; --fill: var(--black); display: inline-block; padding: calc(10px + .14em) 15px 10px; font-size: 17px; line-height: 1; letter-spacing: .08em; color: rgb(var(--t)); text-decoration: none; cursor: pointer; }
.quiet:hover { --wash: .22; }
.field { display: block; width: 100%; border: 0; border-radius: 0; padding: 17px 18px 16px; color: rgb(var(--white)); caret-color: rgb(var(--cyan)); font: 700 20px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; background: linear-gradient(rgb(var(--cyan) / var(--under, .6)), rgb(var(--cyan) / var(--under, .6))) 8px 100% / calc(100% - 16px) var(--rule, 1px) no-repeat, rgb(var(--raised)); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.field::placeholder { color: rgb(var(--gray)); font-weight: 400; opacity: 1; }
.field:focus { outline: 0; --under: 1; --rule: 2px; }
.join { display: grid; gap: 12px; max-width: 620px; margin-bottom: 18px; }
.join .button { margin: 0; }

/* The invite page */
.faces { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.face { font: 700 27px/1 var(--display); padding-top: .16em; }
.code { --cut: 8px; --fill: var(--raised); --strength: .6; display: inline-block; padding: 12px 16px 11px; margin: 2px 0 10px; font: 700 28px/1 var(--mono); letter-spacing: .14em; color: rgb(var(--cyan)); }
.eyes { display: block; width: 176px; height: auto; margin: 34px 0 -8px; }
[data-state] > .quiet { margin-top: 6px; }

.rise { animation: rise .6s cubic-bezier(.2, .8, .2, 1) both; }
.rise:nth-child(2) { animation-delay: .05s; } .rise:nth-child(3) { animation-delay: .1s; } .rise:nth-child(4) { animation-delay: .15s; } .rise:nth-child(5) { animation-delay: .2s; } .rise:nth-child(6) { animation-delay: .25s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
footer { margin-top: 52px; padding-top: 14px; border-top: 1px solid rgb(var(--cyan) / .24); }
footer a { color: rgb(var(--soft)); }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

@media (max-width: 559px) {
  .tabs { width: 100%; }
  .tabs a { padding-left: 4px; padding-right: 4px; font-size: 15px; letter-spacing: .05em; }
}
@media (min-width: 560px) {
  .join { grid-template-columns: 1fr auto; }
  .join .button { width: auto; padding-left: 34px; padding-right: 34px; }
}
@media (min-width: 720px) {
  main { padding-top: 36px; }
  .grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .grid .lead { grid-column: 1 / -1; }
  .grid.three { grid-template-columns: repeat(3, 1fr); }
  .grid + .grid, .join + .grid { margin-top: 12px; }
  .card.pic > .tile { grid-row: 1 / span 2; }
  .card.pic > h3 { align-self: end; margin-bottom: 6px; }
  .card.pic > p { grid-column: 2; margin-top: 0; }
  .panel.dock { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 30px; align-items: center; padding: 26px 30px; }
}
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 52px; align-items: center; margin-top: 44px; }
  .hero h1 { margin-top: 0; }
  .hero .figure { margin-top: 0; padding: 26px; }
  .screen { order: 0; }
  .panel { margin-top: 52px; }
}