/*
  getmarten.app -- the apps' design language on the web.

  The values are the Mac app's (macApp/.../MartenTheme.swift), not new ones:
  the body is the default "Marten" gradient (#0C0C11 bottom-left to #1A173E
  top-right), cards are Palette.card, text is white at 1 / 0.62 / 0.50, the
  accent is white (a white fill with dark text is how both apps show the
  active control), radii are 12 for cards and 16 for panels, and motion is a
  short ease-out with no springs. Inter is served from this site, not Google
  Fonts, so a visit sends nobody's address to a third party.
*/

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --base: #0c0c11;
  --lift: #1a173e;
  --card: #1b1c1d;
  --text: #fff;
  --text-2: rgba(255, 255, 255, 0.62);
  --text-3: rgba(255, 255, 255, 0.5);
  --hairline: rgba(255, 255, 255, 0.08);
  --stroke: rgba(255, 255, 255, 0.06);
  --error: #ff6b6b;
  --ok: #4cd97b;
  --violet: #8b7fe8;
  --violet-deep: #5b4fc4;
  --radius-card: 12px;
  --radius-panel: 16px;
  --radius-control: 8px;
  --ease: cubic-bezier(0, 0, 0.58, 1);
  --measure: 34rem;
  --page: 68rem;
  --gutter: clamp(1rem, 4vw, 3rem);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html {
  background: var(--base);
  -webkit-text-size-adjust: 100%;
}

body::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 46rem;
  z-index: -1;
  background: radial-gradient(48rem 26rem at 50% 0, rgba(112, 100, 200, 0.30), rgba(112, 100, 200, 0));
  pointer-events: none;
}

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(45deg, var(--base) 20%, var(--lift)) fixed;
  color: var(--text);
  font: 400 17px/1.55 "Inter", system-ui, -apple-system, sans-serif;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration-color: rgba(255, 255, 255, 0.35); text-underline-offset: 0.2em; }
a:hover { text-decoration-color: currentColor; }
::selection { background: rgba(255, 255, 255, 0.9); color: var(--base); }

.wrap { width: 100%; max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }

/* Top bar */

.bar {
  max-width: none;
  padding-left: max(var(--gutter), calc((100% - var(--page)) / 2 + var(--gutter)));
  padding-right: max(var(--gutter), calc((100% - var(--page)) / 2 + var(--gutter)));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.brand img { width: 30px; height: 30px; }
.bar nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.25rem 1.4rem; font-size: 15px; }
.bar nav a { color: var(--text-2); text-decoration: none; transition: color 0.12s var(--ease); }
.bar nav a:hover { color: var(--text); }

/* Landing */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: clamp(2rem, 6vw, 4.5rem);
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
}
.hero-icon {
  width: clamp(4.5rem, 9vw, 6rem);
  height: auto;
  margin-bottom: 1.75rem;
  filter: drop-shadow(0 18px 40px rgba(112, 100, 200, 0.55));
}
.hero h1 {
  margin: 0 0 1.25rem;
  max-width: 14ch;
  font-size: clamp(2.7rem, 8vw, 5.4rem);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.045em;
}
.grad {
  background: linear-gradient(100deg, #fff 10%, #b3a9ff 55%, #8b7fe8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.hero .lede { margin: 0; max-width: 36rem; font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--text-2); }
.cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 2rem; }
.hero .status { margin: 1.5rem 0 0; font-size: 15px; color: var(--text-3); display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; justify-content: center; }
.hero .status strong { color: var(--text); font-weight: 550; }
.hero .planned { margin: 0.6rem 0 0; max-width: 34rem; font-size: 15px; color: var(--text-3); text-align: center; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 10px var(--violet); }

/* A real screenshot, framed like a window: the apps' panel radius, a hairline and a deep shadow.
   The light behind it is the icon's own violet, so the window sits in the app's colour rather than
   on a flat page. */
.shot { position: relative; margin-top: 0; margin-bottom: clamp(4rem, 9vw, 7rem); }
.shot::before {
  content: "";
  position: absolute;
  inset: 4% 2% 14%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(112, 100, 200, 0.7), rgba(26, 23, 62, 0));
  filter: blur(40px);
}
.shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-panel);
  border: 1px solid var(--stroke);
  background: #000;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55);
}
.shot figcaption { margin-top: 1rem; font-size: 14px; color: var(--text-3); }
.shot figcaption a { text-decoration: none; }
.shot figcaption a:hover { color: var(--text); }

.section { position: relative; padding-top: clamp(2.5rem, 5vw, 3.5rem); padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }
/* The rule sits inside the gutter, so it starts where the text does. */
.section::before, .foot::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  border-top: 1px solid var(--hairline);
}
.section > h2, .band-body > h2 {
  margin: 0 0 1.75rem;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  line-height: 1.1;
  font-weight: 650;
  letter-spacing: -0.025em;
}

/* What each app adds: two plain panels straight under the screenshot. */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding-bottom: clamp(3rem, 6vw, 4.5rem); }
.pair p {
  margin: 0;
  padding: 1.5rem 1.6rem;
  font-size: 17px;
  line-height: 1.5;
  color: var(--text-2);
  background: rgba(27, 28, 29, 0.6);
  border-radius: var(--radius-panel);
}
.pair b { display: block; margin-bottom: 0.4rem; color: var(--text); font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; }

/* A section over a still from the film, full width: the page's one picture-led moment, as the
   apps' details pages put a backdrop behind their text. The scrim runs from the page colour on the
   text side to clear on the far side, and closes over the bottom so the next section follows on. */
.band { position: relative; overflow: hidden; isolation: isolate; }
.band-art {
  position: absolute;
  inset: -3rem 0;
  will-change: transform;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(12, 12, 17, 0.85) 0%, rgba(12, 12, 17, 0.55) 45%, rgba(12, 12, 17, 0) 100%),
    url("/images/sintel-moon.jpg") center 35% / cover no-repeat;
  /* Faded in and out at the top and bottom, so the picture rises out of the page's own gradient
     rather than sitting on it as a rectangle. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 80%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 80%, transparent 100%);
}
.band-body { padding-top: clamp(4rem, 8vw, 6rem); padding-bottom: clamp(3.5rem, 7vw, 5rem); }
.band .body { margin: 0 0 1rem; max-width: 40rem; font-size: 18px; line-height: 1.55; color: rgba(255, 255, 255, 0.78); }

/* A section's one claim, set larger than body text. */
.big {
  margin: 0 0 1.75rem;
  max-width: 46rem;
  font-size: clamp(1.4rem, 3vw, 2.3rem);
  line-height: 1.3;
  font-weight: 550;
  letter-spacing: -0.02em;
}

/* The formats, as one line of text: they are facts, not controls. */
.formats { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; }
.formats li {
  position: relative;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.formats li + li::before { content: ""; position: absolute; left: -1.1rem; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: var(--violet); }

/* In the player: stills with the player's own controls drawn over them. The controls copy the Mac
   player's (PlayerOverlays.swift: SkipCard, NextEpisodeCard; PlayerFormatBadge): a black-glass capsule
   or panel at 0.55, a 0.16 to 0.22 hairline, Inter at the same weights. */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.card { margin: 0; }
.frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: #000 center / cover no-repeat;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  border: 1px solid var(--stroke);
}
.frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.45));
}
.still-snow { background-image: url("/images/still-000140.jpg"); }
.still-market { background-image: url("/images/still-000441.jpg"); }
.still-desert { background-image: url("/images/still-000612.jpg"); }
.card figcaption { margin-top: 0.9rem; font-size: 17px; line-height: 1.45; color: var(--text); max-width: 22rem; }
.section > .note { margin: 1.25rem 0 0; font-size: 14px; color: var(--text-3); }

.ui-skip, .ui-next, .ui-badge {
  position: absolute;
  z-index: 1;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.ui-skip {
  right: 6%;
  bottom: 9%;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 34px;
  padding: 0 0.95rem;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}
.ui-skip svg, .ui-next svg { width: 12px; height: 12px; fill: currentColor; }
.ui-skip em { font-style: normal; font-weight: 400; color: rgba(255, 255, 255, 0.55); font-variant-numeric: tabular-nums; }
.ui-next {
  right: 5%;
  bottom: 8%;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem;
  border-radius: 12px;
  border-color: rgba(255, 255, 255, 0.16);
  max-width: 90%;
}
.ui-next .thumb { flex: none; width: 58px; height: 33px; border-radius: 5px; background-position: center; background-size: cover; }
.ui-next .lines { display: grid; line-height: 1.25; min-width: 0; }
.ui-next small { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.ui-next .ep { font-size: 10px; color: rgba(255, 255, 255, 0.7); }
.ui-next b { font-size: 12px; font-weight: 600; white-space: nowrap; }
.ui-next .play {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  height: 26px;
  padding: 0 0.7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ui-badge {
  top: 7%;
  right: 5%;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  border-color: rgba(255, 255, 255, 0.22);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Your library: tiles in the apps' card grey, the last one across the full width. */
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.tiles li {
  padding: 1.6rem 1.75rem;
  font-size: 17px;
  line-height: 1.5;
  color: var(--text-2);
  background: rgba(27, 28, 29, 0.6);
  border-radius: var(--radius-panel);
}
.tiles b { display: block; margin-bottom: 0.35rem; color: var(--text); font-size: 1.2rem; font-weight: 600; letter-spacing: -0.015em; }
.tiles .wide { grid-column: 1 / -1; background: linear-gradient(100deg, rgba(91, 79, 196, 0.28), rgba(27, 28, 29, 0.6)); }

/* The last block: one sentence and a button. */
.closing { text-align: center; padding-top: clamp(3rem, 7vw, 5rem); padding-bottom: clamp(3rem, 7vw, 5rem); }
.closing::before { display: none; }
.closing h2 { margin: 0 0 1rem; font-size: clamp(1.9rem, 4.5vw, 3.2rem); line-height: 1.1; font-weight: 700; letter-spacing: -0.035em; }
.closing p { margin: 0 auto 2rem; max-width: 30rem; color: var(--text-2); font-size: 18px; }

/* Links that are buttons. */
a.button { display: inline-block; margin: 0; text-decoration: none; text-align: center; }
a.button.solid { padding: 0.95rem 1.6rem; font-size: 17px; border-radius: 999px; background: #fff; color: var(--base); box-shadow: 0 10px 30px rgba(139, 127, 232, 0.35); }
a.button.solid:hover { box-shadow: 0 12px 38px rgba(139, 127, 232, 0.55); }
a.button.ghost { padding: 0.95rem 1.4rem; font-size: 17px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: var(--text); border: 1px solid rgba(255, 255, 255, 0.16); }
a.button.ghost:hover { background: rgba(255, 255, 255, 0.14); }

/* Sections rise as they scroll in; the page is whole without the script (site.js). */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

/* Footer */

.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-top: 2rem;
  padding-bottom: 3rem;
  position: relative;
  font-size: 14px;
  color: var(--text-3);
}
.foot .fine { flex: 1 0 100%; margin: 0; max-width: 46rem; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.foot nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--text); }

/* Text pages: privacy, terms, delete account. Each section is a row, its heading in the left
   column and its text in the right, so a long page reads as a list of short answers. */

.doc { max-width: 56rem; padding-top: clamp(2rem, 6vw, 4rem); padding-bottom: 4rem; }
.doc h1 { margin: 0 0 0.5rem; font-size: clamp(2rem, 4.5vw, 2.75rem); line-height: 1.1; font-weight: 650; letter-spacing: -0.03em; }
.doc .updated { margin: 0 0 2rem; color: var(--text-3); font-size: 15px; }
.doc > p { max-width: 40rem; margin: 0 0 1rem; color: var(--text-2); }
.doc .lead { font-size: clamp(1.2rem, 2.2vw, 1.5rem); line-height: 1.4; letter-spacing: -0.015em; color: var(--text); }
.doc section {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  gap: 0.5rem 2.5rem;
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--hairline);
}
.doc h2 { margin: 0; font-size: 1rem; line-height: 1.4; font-weight: 600; letter-spacing: -0.005em; }
.doc section p, .doc li { color: var(--text-2); }
.doc section p { margin: 0 0 1rem; }
.doc section p:last-child, .doc section ul:last-child { margin-bottom: 0; }
.doc ul { margin: 0 0 1rem; padding-left: 1.2rem; }
.doc li { margin-bottom: 0.5rem; }
.doc strong { color: var(--text); font-weight: 550; }

/* Account pages.
   Action pages (new password from an email, 404): one panel in the middle. */

.card-page { display: grid; place-items: center; min-height: calc(100vh - 160px); padding-bottom: 4rem; }
.action {
  width: min(100%, 26rem);
  padding: 2rem;
  background: rgba(27, 28, 29, 0.72);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-panel);
}
.action h1 { margin: 0 0 0.5rem; font-size: 1.6rem; font-weight: 650; letter-spacing: -0.02em; }
.action p { margin: 0 0 1.25rem; color: var(--text-2); }
.action .small, .form-card .small { margin: 1rem 0 0; font-size: 14px; color: var(--text-3); }

/* Forms, everywhere */
.action form, .form-card form, .account form { display: grid; gap: 0.75rem; }
.action label, .form-card label, .account label { font-size: 14px; color: var(--text-3); }
.action input:not([type="radio"]), .form-card input, .account input:not([type="radio"]), .sup-box input {
  width: 100%;
  padding: 0.85rem 0.95rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.28);
  color: var(--text);
  font: inherit;
  transition: border-color 0.12s var(--ease);
}
.action input:focus, .form-card input:focus, .account input:focus, .sup-box input:focus { outline: none; border-color: rgba(139, 127, 232, 0.9); }
#repeat-row { display: grid; gap: 0.75rem; }
.big-code { margin: 0; font-size: 2.2rem; font-weight: 700; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; }
.message { font-size: 15px; margin: 0; }
.message:empty { display: none; }
.message.error { color: var(--error); }
.message.ok { color: var(--ok); }

.button {
  margin-top: 0.5rem;
  padding: 0.8rem 1.1rem;
  border: 0;
  border-radius: 10px;
  background: #fff;
  color: var(--base);
  font: 600 16px/1.2 "Inter", system-ui, sans-serif;
  cursor: pointer;
  transition: transform 0.09s var(--ease), opacity 0.12s var(--ease), background-color 0.12s var(--ease);
}
.button:active { transform: scale(0.98); }
.button:disabled { opacity: 0.5; cursor: default; }
.button.quiet { background: rgba(255, 255, 255, 0.1); color: var(--text); margin-top: 0; }
.button.quiet:hover { background: rgba(255, 255, 255, 0.16); }
.button.danger { background: var(--error); color: #fff; }
.button.danger-text { background: transparent; color: var(--error); padding-left: 0.5rem; padding-right: 0.5rem; margin-left: auto; margin-top: 0; }
.button.add { margin-top: 0.75rem; }
.button.wide-button { width: 100%; margin-top: 0.75rem; padding: 0.95rem 1.1rem; }

/* The sign-in page: what an account is for on the left, the form on the right. */
.page { padding-bottom: 4rem; }
.signin-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 25rem);
  gap: clamp(2rem, 7vw, 6rem);
  align-items: center;
  min-height: calc(100vh - 230px);
}
.intro h1 { margin: 0 0 1rem; font-size: clamp(2.3rem, 5.5vw, 3.8rem); line-height: 1.04; font-weight: 700; letter-spacing: -0.04em; }
.intro p { margin: 0 0 1.75rem; max-width: 28rem; font-size: 1.15rem; color: var(--text-2); }
.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; max-width: 28rem; color: var(--text-2); }
.points li { position: relative; padding-left: 1.6rem; }
.points li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 7px; height: 7px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 10px var(--violet); }
.form-card {
  padding: 2rem;
  background: rgba(27, 28, 29, 0.75);
  border: 1px solid var(--stroke);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(91, 79, 196, 0.22);
}

/* The account once signed in: a header, then rows like the text pages. */
.account { max-width: 52rem; margin: 0 auto; }
.acct-head { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; padding: 1rem 0 2.25rem; }
.acct-head h1 { margin: 0 0 0.5rem; font-size: clamp(1.4rem, 3.4vw, 2rem); line-height: 1.15; font-weight: 650; letter-spacing: -0.025em; overflow-wrap: anywhere; }
.acct-head a.small-button { margin-left: auto; padding: 0.55rem 1.1rem; font-size: 15px; }
.avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #8b7fe8, #5b4fc4);
  color: #fff;
  font-weight: 650;
  font-size: 1rem;
}
.avatar.big { width: 4.25rem; height: 4.25rem; font-size: 1.7rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.chip { padding: 0.2rem 0.7rem; border-radius: 999px; background: rgba(255, 255, 255, 0.07); font-size: 13px; color: var(--text-2); }
.chip.ok::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 0.45rem; border-radius: 50%; background: var(--ok); }
.account section {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  gap: 0.5rem 2.5rem;
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--hairline);
}
.account h2 { margin: 0; font-size: 1rem; line-height: 1.4; font-weight: 600; }
.account section p { margin: 0 0 1rem; color: var(--text-2); }
.account section > div { max-width: 28rem; }
.account section > .wide-col { max-width: 36rem; }
.danger-zone { padding: 1.25rem 1.4rem; border: 1px solid rgba(255, 107, 107, 0.3); border-radius: var(--radius-card); }

/* Profiles: a row each. The rows do open the editor, so they get a hover and a pointer. */
.rows { list-style: none; margin: 0; padding: 0; border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--stroke); }
.rows li { display: flex; align-items: center; gap: 0.85rem; padding: 0.75rem 1rem; background: rgba(0, 0, 0, 0.18); }
.rows li + li { border-top: 1px solid var(--hairline); }
.rows .name { font-weight: 550; }
.rows .tag { padding: 0.1rem 0.55rem; border-radius: 999px; background: rgba(255, 255, 255, 0.08); font-size: 12px; color: var(--text-2); }
.rows .edit { margin-left: auto; color: var(--text-3); font-size: 14px; }
.rows li.editable { cursor: pointer; transition: background-color 0.12s var(--ease); }
.rows li.editable:hover { background: rgba(255, 255, 255, 0.06); }
.rows li.editable:hover .edit { color: var(--text); }
.editor { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--hairline); }
.editor h3 { margin: 0 0 0.25rem; font-size: 1.05rem; font-weight: 600; }
.pin-choice { border: 0; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.pin-choice legend { font-size: 14px; color: var(--text-3); margin-bottom: 0.4rem; }
.pin-choice label { display: flex; align-items: center; gap: 0.5rem; color: var(--text-2); font-size: 15px; }
.pin-choice input { width: auto; accent-color: #fff; }
.editor-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.editor-actions .button { margin-top: 0; }
/* The code is dark on white whatever the theme: a scanner needs the light margin around it. */
.qr { background: #fff; border-radius: var(--radius-control); padding: 0.75rem; width: max-content; max-width: 100%; margin: 0 0 1rem; }
.qr svg { display: block; width: 11rem; height: 11rem; }
#tsv-key { font-size: 0.95rem; letter-spacing: 0.08em; word-break: break-all; }
.danger-form { margin-top: 0.25rem; }

[hidden] { display: none !important; }

/* Everything that appears, appears with an animation (the apps' rule). */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise 0.45s var(--ease) both; }
  .rise.later { animation-delay: 0.08s; }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

@media (max-width: 900px) {
  .cards { grid-template-columns: 1fr; }
  .card figcaption { max-width: none; }
}

@media (max-width: 860px) {
  .signin-split { grid-template-columns: 1fr; min-height: 0; padding-top: 1rem; }
}

@media (max-width: 700px) {
  .doc section, .account section { grid-template-columns: 1fr; }
  .acct-head a.small-button { margin-left: 0; }
}

@media (max-width: 760px) {
  .cards, .pair, .tiles { grid-template-columns: 1fr; }
  .bar { flex-wrap: wrap; row-gap: 0.75rem; padding-top: 1.1rem; padding-bottom: 1.1rem; }
  .bar nav { width: 100%; justify-content: space-between; gap: 0.25rem 0.75rem; font-size: 14px; }
}

/* Navigation: the page you are on is white. */
.bar nav a[aria-current] { color: var(--text); }

/* Licences */
.notices { margin: 0; }
.notice + .notice { margin-top: 1.25rem; }
.notice dt { font-weight: 600; color: var(--text); }
.notice dt span { display: block; margin-top: 0.1rem; font-weight: 400; font-size: 14px; color: var(--text-3); }
.notice dd { margin: 0.35rem 0 0; color: var(--text-2); }
.notice dt, .notice dd { overflow-wrap: anywhere; }

/* Motion, each of it slow and only where the page is showing something alive. */
@media (prefers-reduced-motion: no-preference) {
  .hero-icon { animation: rise 0.45s var(--ease) both, float 7s ease-in-out 0.6s infinite; }
  @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
  .grad { background-size: 220% 100%; animation: sheen 9s ease-in-out infinite; }
  @keyframes sheen { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
  .dot { animation: glow 2.6s ease-in-out infinite; }
  @keyframes glow { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
  /* The player's controls arrive after their picture has. */
  .js .card .ui-skip, .js .card .ui-next, .js .card .ui-badge { opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--ease) 0.5s, transform 0.5s var(--ease) 0.5s; }
  .js .card.in .ui-skip, .js .card.in .ui-next, .js .card.in .ui-badge { opacity: 1; transform: none; }
  .count { font-style: normal; display: inline-block; min-width: 1.1ch; text-align: center; }
  .shot img { animation: settle 0.9s var(--ease) 0.15s both; }
  @keyframes settle { from { transform: translateY(14px) scale(0.985); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* Supporter page: a price page, not a settings page. Two plan cards, one big button, a ticked list. */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sup { max-width: 44rem; margin: 0 auto; padding-bottom: 3rem; }
.sup-bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0 1.5rem; }
.sup-bar .avatar { width: 2.25rem; height: 2.25rem; font-size: 1rem; flex: none; }
.sup-bar .chips { flex: 1; }
.sup-head { text-align: center; padding: 0.5rem 0 2rem; }
.sup-head h1 { margin: 0 0 0.75rem; font-size: clamp(2rem, 5vw, 2.75rem); letter-spacing: -0.02em; line-height: 1.1; }
.sup-head .lede { margin: 0 auto; max-width: 30rem; color: var(--text-2); font-size: 1.1rem; }
.plans { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.plan {
  position: relative; display: flex; flex-direction: column; gap: 0.35rem; padding: 1.5rem 1.25rem 1.25rem;
  border-radius: var(--radius-panel); border: 1px solid var(--stroke); background: rgba(0, 0, 0, 0.2); cursor: pointer;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.plan:hover { border-color: rgba(139, 127, 232, 0.5); }
.plan input { position: absolute; opacity: 0; pointer-events: none; }
.plan:has(input:checked) { border-color: var(--violet); background: linear-gradient(160deg, rgba(91, 79, 196, 0.28), rgba(27, 28, 29, 0.55)); box-shadow: 0 0 0 1px var(--violet), 0 12px 40px rgba(91, 79, 196, 0.25); }
.plan:has(input:focus-visible) { outline: 2px solid var(--violet); outline-offset: 3px; }
.plan-badge { position: absolute; top: -0.7rem; left: 1.25rem; padding: 0.15rem 0.7rem; border-radius: 999px; background: var(--violet-deep); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; }
.plan-name { font-size: 1rem; font-weight: 600; color: var(--text-2); }
.plan-price { font-size: 2.4rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; color: var(--text); }
.plan-price small { font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--text-2); }
.plan-note { font-size: 14px; color: var(--text-3); }
.sup-buy { margin-top: 1.5rem; padding-top: 1rem; padding-bottom: 1rem; font-size: 1.1rem; }
.sup .message { text-align: center; margin-top: 0.75rem; }
.sup-trust { margin: 1rem auto 0; max-width: 32rem; text-align: center; font-size: 13px; line-height: 1.5; color: var(--text-3); }
.sup-manage { margin-top: 1rem; padding: 1.5rem; border-radius: var(--radius-panel); border: 1px solid var(--stroke); background: rgba(0, 0, 0, 0.2); text-align: center; }
.sup-manage h2 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.sup-manage p { color: var(--text-2); }
.sup-perks { margin-top: 2.5rem; padding: 1.75rem 1.5rem; border-radius: var(--radius-panel); border: 1px solid var(--stroke); background: rgba(0, 0, 0, 0.18); }
.sup-perks h2 { margin: 0 0 1rem; font-size: 1.1rem; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.checks li { position: relative; padding-left: 1.75rem; color: var(--text-2); line-height: 1.45; }
.checks li::before { content: ""; position: absolute; left: 0; top: 0.2em; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--violet-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.4l2.3 2.3 5.1-5.2' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat; }
@media (max-width: 600px) { .plans { grid-template-columns: 1fr; } .plan-badge { top: -0.65rem; } }

.perks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.perks li { padding: 1.1rem 1.15rem; border-radius: var(--radius-card); border: 1px solid var(--stroke); background: rgba(255, 255, 255, 0.03); color: var(--text-2); line-height: 1.45; font-size: 15px; }
.perks b { display: block; margin-bottom: 0.3rem; color: var(--text); font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }
.perks .more { grid-column: 1 / -1; background: linear-gradient(100deg, rgba(91, 79, 196, 0.28), rgba(27, 28, 29, 0.6)); border-color: rgba(139, 127, 232, 0.35); }
@media (max-width: 600px) { .perks { grid-template-columns: 1fr; } }

.sup-box { margin-top: 1rem; padding: 1.5rem; border-radius: var(--radius-panel); border: 1px solid var(--stroke); background: rgba(0, 0, 0, 0.2); }
.sup-box h2 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.sup-box p { color: var(--text-2); }
.sup-inline { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.75rem; }
.sup-inline input { flex: 1 1 14rem; margin: 0; }
.sup-inline .button { margin-top: 0; }
.votes { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.votes li { display: flex; align-items: center; gap: 1rem; padding: 0.85rem 1rem; border-radius: var(--radius-card); border: 1px solid var(--stroke); background: rgba(255, 255, 255, 0.03); }
.votes li.mine { border-color: var(--violet); background: linear-gradient(100deg, rgba(91, 79, 196, 0.22), rgba(27, 28, 29, 0.5)); }
.votes .what { flex: 1; min-width: 0; }
.votes .what b { display: block; color: var(--text); font-weight: 600; }
.votes .what span { font-size: 14px; color: var(--text-3); }
.votes .count { min-width: 2ch; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); }
.votes button { flex: none; padding: 0.45rem 1rem; border-radius: 999px; border: 1px solid var(--stroke); background: rgba(255, 255, 255, 0.07); color: var(--text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.votes button:hover { background: rgba(255, 255, 255, 0.14); }
.votes li.mine button { background: #fff; color: #0c0c11; border-color: #fff; }
.wall { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.wall li { padding: 0.5rem 1rem; border-radius: 999px; border: 1px solid var(--stroke); background: rgba(255, 255, 255, 0.05); color: var(--text); font-weight: 550; }
@media (max-width: 600px) { .votes li { flex-wrap: wrap; } .votes .what { flex: 1 1 100%; } .votes .count { margin-left: auto; } }

/* The header's profile: a round button with the first letter of the address, and a small menu under it. */
.profile-wrap { position: relative; display: inline-flex; align-items: center; }
.profile { width: 2.1rem; height: 2.1rem; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.18); background: linear-gradient(145deg, #8b7fe8, #5b4fc4); color: #fff; font: inherit; font-size: 0.95rem; font-weight: 650; line-height: 1; cursor: pointer; transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease); }
.profile:hover, .profile[aria-expanded="true"], .profile.current { box-shadow: 0 0 0 3px rgba(139, 127, 232, 0.35); }
.profile-menu { position: absolute; top: calc(100% + 0.6rem); right: 0; z-index: 20; min-width: 13rem; padding: 0.4rem; border-radius: var(--radius-card); border: 1px solid var(--stroke); background: #1b1c1d; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); }
.profile-menu[hidden] { display: none; }
.profile-menu .who { margin: 0; padding: 0.5rem 0.7rem 0.6rem; font-size: 13px; color: var(--text-3); border-bottom: 1px solid var(--hairline); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 16rem; }
.profile-menu a, .profile-menu button { display: block; width: 100%; box-sizing: border-box; margin: 0; padding: 0.55rem 0.7rem; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: 15px; text-align: left; text-decoration: none; cursor: pointer; }
.profile-menu a:hover, .profile-menu button:hover { background: rgba(255, 255, 255, 0.08); }
.sup-chips { justify-content: center; margin-top: 1rem; }
.sup-chips:empty { display: none; }
.sup-head .message { margin-bottom: 1rem; }
.sup-signin, #signin-card { margin-top: 1.25rem; }
#signin-card form { display: grid; gap: 0.75rem; }
.cta-more { margin-top: 0.75rem; }