/* The look of the app (DESIGN.md): lime sand photographs, milky glass, ink text, system font. */
:root { --sand: #e4f25e; --glass: rgba(255, 255, 255, 0.58); --edge: rgba(255, 255, 255, 0.7); --ink: #1e211c; --muted: #5e6359; --line: #9aa684; --porcelain: #f8faef; --from: #acfb56; --to: #cafa69; --lime: #bff952; }
* { box-sizing: border-box; }
html { background: var(--sand); }
body { position: relative; margin: 0; min-height: 100vh; color: var(--ink); font: 17px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--sand) url("/sand-plain.jpg") center / cover no-repeat; }
/* Start page: as on the phone, text in the sand above the stone, links in the sand below it. */
body.home::before { background-image: url("/sand-start.jpg"); background-position: right bottom; }
.home main { display: flex; flex-direction: column; min-height: 100vh; padding-bottom: 20px; }
.home .links { margin-top: auto; display: flex; gap: 20px; }
.home .links a { font-size: 0.95rem; }
@media (min-aspect-ratio: 1/1) {
  body.home::before { background-image: url("/sand-plain.jpg"); }
  .home main { margin-left: 8vw; }
  .home main::before { content: ""; position: fixed; top: 0; right: 0; bottom: 0; z-index: -1; width: 46.2vh; background: url("/sand-start.jpg") right bottom / cover no-repeat; -webkit-mask-image: linear-gradient(to right, transparent, #000 35%); mask-image: linear-gradient(to right, transparent, #000 35%); }
}
/* The "Alpha" sticker on every page, results included. */
body::after { content: "Alpha"; position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--ink); color: var(--lime); font-size: 17px; font-weight: 600; transform: rotate(-12deg); box-shadow: 0 8px 20px rgba(30, 33, 28, 0.28); }
main { max-width: 680px; margin: 0 auto; padding: 24px 20px 64px; }
.wordmark { margin: 0 0 20px; font-size: 26px; line-height: 40px; letter-spacing: -0.5px; }
body:not(.home) main { margin: 24px auto 48px; padding: 24px; border: 1px solid var(--edge); border-radius: 28px; background: var(--glass); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: 0 12px 32px rgba(30, 33, 28, 0.1); }
body:not(.home) { padding: 0 12px; }
.lang { display: inline-flex; gap: 4px; margin: 0 0 16px; padding: 4px; border: 1px solid var(--edge); border-radius: 999px; background: var(--glass); }
.lang a { padding: 10px 16px; border-radius: 999px; color: var(--muted); font-size: 0.95rem; text-decoration: none; }
.lang a[aria-current] { background: linear-gradient(90deg, var(--from), var(--to)); color: var(--ink); font-weight: 600; }
h1 { font-size: 2.25rem; font-weight: 300; line-height: 1.12; letter-spacing: -0.5px; margin: 8px 0 16px; }
.home h1 { font-size: clamp(2.5rem, 10vw, 4.5rem); font-weight: 200; margin: 0 0 12px; }
h2 { font-size: 1.15rem; font-weight: 600; line-height: 1.3; margin: 32px 0 8px; }
ul { padding-left: 20px; }
li { margin-bottom: 8px; }
.kicker { font-size: 0.95rem; font-weight: 500; color: var(--muted); margin: 0; padding-right: 72px; }
.small, .app { color: var(--muted); font-size: 0.95rem; }
.big { font-size: 3.5rem; font-weight: 200; line-height: 1; margin: 16px 0 8px; }
.bar, .mini { display: block; background: var(--edge); border-radius: 10px; overflow: hidden; }
.bar { height: 14px; }
.bar span, .mini span { display: block; height: 100%; background: var(--ink); }
.groups { list-style: none; padding: 0; }
.groups li { display: grid; grid-template-columns: 9rem 1fr auto; gap: 12px; align-items: center; margin: 8px 0; }
.mini { height: 8px; }
.qr { display: block; width: 220px; height: 220px; margin: 32px auto; padding: 8px; border-radius: 20px; background: #fff; }
.files a { word-break: break-all; }
a { color: var(--ink); }
form { display: grid; gap: 8px; margin: 24px 0; }
textarea { font: 15px/1.4 ui-monospace, Menlo, monospace; padding: 12px; border: 1px solid var(--line); border-radius: 20px; background: var(--porcelain); color: var(--ink); width: 100%; }
button { font: 600 16px system-ui, sans-serif; min-height: 52px; padding: 14px 24px; border: 0; border-radius: 999px; background: linear-gradient(90deg, var(--from), var(--to)); color: var(--ink); cursor: pointer; }
.result { padding: 4px 16px; border-radius: 20px; background: var(--porcelain); border: 1px solid var(--line); }
.result:empty { display: none; }
.result.ok { border-color: var(--ink); }