/* MarkitoBar · public site: tokens (sistema/tokens.css, approved) + the approved landing (handoff/styles.css) + the pages and motion built on them. Tokens are not changed here. */

/* MarkitoBar · Dirección C "Objeto en el escritorio" · tokens v2 (Onest) */
:root {
  /* Escritorio (fondo de página): papel cálido */
  --color-desk: #efe9df;
  --color-desk-deep: #ddd3c3;
  --color-paper: #fbf8f2;
  --color-paper-edge: #e6ddcd;
  --color-ink: #1d1b18;
  --color-ink-muted: #5e584f;

  /* Objeto (la app): vidrio oscuro */
  --color-device: #141413;
  --color-device-raised: #1f1e1c;
  --color-device-line: #2c2a27;
  --color-device-text: #eee9e0;
  --color-device-muted: #8d877d;

  /* Acento único: el naranjo del lápiz */
  --color-accent: #e2621f;
  --color-accent-deep: #b84c14;
  --color-on-accent: #1a0b03;

  /* Teclas */
  --color-key-top: #fdfbf7;
  --color-key-side: #b9b0a1;

  /* Tipografía */
  --font-sans: "Onest", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
  --font-readout: "Doto", "IBM Plex Mono", monospace;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.375rem;
  --text-xl: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
  --text-display: clamp(2.75rem, 1.6rem + 4.4vw, 5.25rem);
  --leading-tight: 1.02;
  --leading-body: 1.55;
  --tracking-display: -0.03em;

  /* Espaciado (base 4) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Forma */
  --radius-key: 8px;
  --radius-paper: 6px;
  --radius-device: 18px;
  --radius-pill: 999px;

  /* Luz: una sola fuente arriba a la izquierda */
  --shadow-object: 0 0 0 1px #000, inset 0 1px 0 rgb(255 255 255 / 10%), 0 48px 70px -28px rgb(40 25 10 / 70%), 0 10px 18px -8px rgb(40 25 10 / 50%);
  --shadow-paper: 0 1px 1px rgb(60 40 20 / 14%), 0 16px 28px -14px rgb(60 40 20 / 42%);
  --shadow-key: 0 3px 0 var(--color-key-side), 0 6px 10px -3px rgb(60 40 20 / 40%);
  --shadow-key-pressed: 0 1px 0 var(--color-key-side), 0 2px 4px -1px rgb(60 40 20 / 35%);
  --shadow-inset: inset 0 2px 4px rgb(0 0 0 / 45%);

  --focus-ring: 0 0 0 3px var(--color-paper), 0 0 0 6px var(--color-accent);
  --measure: 62ch;
}


/* =========================================================
   MarkitoBar · landing beta privada
   Dirección C "Objeto en el escritorio"
   Orden: base · materiales · componentes · secciones · responsive
   ========================================================= */

:root {
  /* Derivados de tokens (no son tokens nuevos de color ni tipo) */
  --gutter: clamp(var(--space-4), 4vw, var(--space-12));
  --frame-max: 80rem;
  --column-gap: clamp(var(--space-4), 2vw, var(--space-6));
  --radius-tray: calc(var(--radius-key) + var(--space-1));

  /* Textura de papel: ruido fractal. Escritorio 0.07, papel 0.04 */
  --texture-desk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .18 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --texture-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .18 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Sombra de los screenshots (receta de materiales: drop-shadow, luz arriba a la izquierda) */
  --edge-paper: 0 0 0 1px var(--color-paper-edge);
  --shadow-card: var(--edge-paper), var(--shadow-paper);
  --shadow-chip: var(--edge-paper), 0 1px 1px rgb(60 40 20 / 14%);
  --shadow-corner: -2px 2px 3px rgb(60 40 20 / 18%);
  --shadow-button: 0 3px 0 var(--color-accent-deep), 0 8px 14px -6px rgb(120 45 10 / 45%);
  --shadow-button-pressed: 0 1px 0 var(--color-accent-deep), 0 3px 6px -3px rgb(120 45 10 / 45%);
  --shadow-button-focus: 0 3px 0 var(--color-accent-deep), var(--focus-ring);
  --shadow-display: inset 0 2px 6px #000, 0 0 0 1px var(--color-device-line);
  --shadow-menubar: 0 1px 0 var(--color-paper-edge), 0 6px 12px -8px rgb(60 40 20 / 35%);
  --shadow-tape: 0 1px 2px rgb(60 40 20 / 15%);
  --shadow-shot: drop-shadow(0 30px 40px rgb(40 25 10 / 45%)) drop-shadow(0 6px 10px rgb(40 25 10 / 35%));
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light;
  scroll-behavior: auto;
}

body {
  margin: 0;
  min-block-size: 100vh;
  overflow-x: clip;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--color-ink);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
ul,
dl,
dd,
figure,
pre {
  margin: 0;
}

img {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

a {
  color: inherit;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

@media (hover: hover) {
  a:hover {
    text-decoration-thickness: 2px;
  }
}

:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--focus-ring);
}

.frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--column-gap);
  inline-size: min(100% - 2 * var(--gutter), var(--frame-max));
  margin-inline: auto;
}

.section-title {
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.plain-list {
  display: grid;
  gap: var(--space-3);
  padding: 0;
  list-style: none;
}

/* ---------- Materiales ---------- */

.desk {
  background-color: var(--color-desk);
  background-image: var(--texture-desk);
  background-repeat: repeat;
}

.shot {
  inline-size: 100%;
  filter: var(--shadow-shot);
}

.paper-card {
  padding: var(--space-6);
  border-radius: var(--radius-paper);
  background-color: var(--color-paper);
  background-image: var(--texture-paper);
  background-repeat: repeat;
  box-shadow: var(--shadow-card);
  color: var(--color-ink);
}

.paper-card--tilt-left {
  rotate: -1.5deg;
}

.paper-card--tilt-right {
  rotate: 1.25deg;
}

/* Esquina levantada: solo en una tarjeta de la página */
.paper-card--corner {
  position: relative;
}

.paper-card--corner::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: var(--space-8);
  block-size: var(--space-8);
  border-start-end-radius: var(--radius-paper);
  background: linear-gradient(225deg, var(--color-desk) 50%, var(--color-paper-edge) 50%, var(--color-paper) 100%);
  box-shadow: var(--shadow-corner);
}

.paper-card__title {
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.paper-card > * + * {
  margin-block-start: var(--space-3);
}

/* ---------- Componentes ---------- */

.eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.key {
  display: inline-grid;
  place-items: center;
  min-inline-size: 2.75rem;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-key);
  background: linear-gradient(var(--color-key-top), #e7e1d6);
  box-shadow: var(--shadow-key);
  font: 600 var(--text-sm) / 1 var(--font-sans);
  color: var(--color-ink);
}

.key--wide {
  min-inline-size: 7rem;
}

.key--lg {
  min-inline-size: 4.5rem;
  min-block-size: 4.5rem;
  padding-inline: var(--space-4);
  font-size: var(--text-lg);
}

.key--space {
  min-inline-size: clamp(8rem, 20vw, 13rem);
}

.file-chip {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background-color: var(--color-paper);
  box-shadow: var(--shadow-chip);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

.inline-file {
  padding: 0.05em 0.3em;
  border-radius: var(--radius-paper);
  background-color: var(--color-desk-deep);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.paper-card .inline-file {
  background-color: var(--color-desk);
}

/* Formulario: bandeja hundida, campo de papel, tecla naranja */
.signup {
  display: grid;
  gap: var(--space-2);
  max-inline-size: 34rem;
}

.signup__label {
  font-size: var(--text-xs);
  font-weight: 600;
}

.signup__note {
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

.tray {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-tray);
  background-color: var(--color-desk-deep);
  box-shadow: var(--shadow-inset);
}

.tray__field {
  flex: 999 1 11rem;
  min-inline-size: 0;
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-radius: var(--radius-key);
  background-color: var(--color-paper);
  box-shadow: var(--edge-paper);
  font: inherit;
  color: var(--color-ink);
}

.tray__field::placeholder {
  color: var(--color-ink-muted);
}

.button {
  flex: 1 0 auto;
  padding: var(--space-3) var(--space-6);
  border: 0;
  border-radius: var(--radius-key);
  background: linear-gradient(#ee7a3c, var(--color-accent));
  box-shadow: var(--shadow-button);
  font: 600 var(--text-md) / 1.2 var(--font-sans);
  color: var(--color-on-accent);
  cursor: pointer;
}

.button:focus-visible {
  box-shadow: var(--shadow-button-focus);
}

.button:active {
  box-shadow: var(--shadow-button-pressed);
}

/* Display oscuro: una sola lectura en la página */
.readout {
  display: inline-block;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-key);
  background-color: var(--color-device);
  box-shadow: var(--shadow-display);
  font-family: var(--font-readout);
  font-size: var(--text-lg);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  text-shadow: 0 0 10px rgb(226 98 31 / 40%);
}

/* ---------- Barra de menú ---------- */

.menubar {
  position: relative;
  z-index: 1;
  background-color: var(--color-paper);
  box-shadow: var(--shadow-menubar);
}

.menubar__inner {
  grid-template-columns: 1fr auto;
  align-items: center;
  min-block-size: var(--space-8);
}

.menubar__brand {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  font-size: var(--text-xs);
  font-weight: 600;
  text-decoration: none;
}

.menubar__logo {
  inline-size: 1.25rem;
}

.menubar__status {
  display: inline-grid;
  place-items: center;
  padding: 0.1875rem var(--space-2);
  border-radius: var(--radius-paper);
  background-color: rgb(29 27 24 / 14%);
}

.menubar__item {
  inline-size: 1.125rem;
}

/* ---------- Hero ---------- */

.hero {
  grid-template-areas:
    "copy"
    "object"
    "action";
  row-gap: var(--space-4);
  padding-block: var(--space-6) var(--space-16);
}

.hero__copy {
  grid-area: copy;
  display: grid;
  gap: var(--space-4);
}

.hero__title {
  max-inline-size: 12ch;
  font-size: var(--text-display);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.hero__object {
  grid-area: object;
  display: grid;
  justify-self: center;
  inline-size: min(100%, 19rem);
}

.hero__object > * {
  grid-area: 1 / 1;
}

.hero__keys {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  position: relative;
  place-self: end start;
  margin-block-end: 5%;
}

.hero__action {
  grid-area: action;
  display: grid;
  gap: var(--space-6);
  align-content: start;
}

.hero__lede {
  max-inline-size: 38ch;
  font-size: var(--text-md);
}

/* ---------- Cómo se siente ---------- */

.feel {
  grid-template-areas:
    "notes"
    "object";
  row-gap: var(--space-12);
  padding-block: var(--space-8) var(--space-16);
}

.feel__object {
  grid-area: object;
  justify-self: center;
  inline-size: min(100%, 24rem);
}

.feel__notes {
  grid-area: notes;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  align-content: center;
  row-gap: var(--space-6);
}

.feel__notes > * {
  grid-column: 1 / -1;
}

.paper-card--lead {
  padding: var(--space-8) var(--space-6);
}

.paper-card--lead .paper-card__title {
  font-size: var(--text-xl);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.paper-card--note {
  max-inline-size: 26rem;
  font-size: var(--text-sm);
}

.feel__second {
  grid-column: 2 / -1;
  justify-self: end;
  margin-block-start: calc(-1 * var(--space-6));
}

.feel__third {
  grid-column: 1 / 8;
  margin-block-start: calc(-1 * var(--space-4));
}

/* ---------- Tus notas son archivos ---------- */

.files {
  grid-template-areas:
    "title"
    "tree"
    "copy";
  row-gap: var(--space-8);
  padding-block: var(--space-16);
}

.files__title {
  grid-area: title;
  max-inline-size: 11ch;
  font-size: var(--text-display);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

.files__tree {
  grid-area: tree;
  display: grid;
  gap: var(--space-4);
  align-content: center;
}

.files__path {
  font-family: var(--font-mono);
  font-size: clamp(var(--text-sm), 0.7rem + 1vw, var(--text-lg));
  color: var(--color-ink-muted);
}

.files__list {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
  margin-inline-start: var(--space-3);
  padding: var(--space-2) 0 var(--space-2) var(--space-6);
  border-inline-start: 2px solid var(--color-desk-deep);
  list-style: none;
}

.files__list > li + li {
  margin-inline-start: var(--space-8);
}

.file-chip--hero {
  padding: var(--space-3) var(--space-6);
  box-shadow: var(--shadow-card);
  font-size: clamp(var(--text-xs), 0.3rem + 1.6vw, 1.625rem);
  font-weight: 500;
}

.files__copy {
  grid-area: copy;
  display: grid;
  gap: var(--space-4);
  align-content: end;
  max-inline-size: var(--measure);
}

.files__strong {
  font-weight: 600;
}

/* ---------- Fotos y audio ---------- */

.media {
  grid-template-areas:
    "copy"
    "object"
    "source";
  row-gap: var(--space-8);
  padding-block: var(--space-16);
}

.media__copy {
  grid-area: copy;
  display: grid;
  gap: var(--space-4);
  align-content: center;
  max-inline-size: var(--measure);
}

.media__object {
  grid-area: object;
}

.media__source {
  grid-area: source;
  justify-self: end;
  inline-size: min(100%, 24rem);
  margin-block-start: calc(-1 * var(--space-16));
}

.markdown {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---------- IA opcional ---------- */

.ai {
  grid-template-areas:
    "copy"
    "objects";
  row-gap: var(--space-12);
  padding-block: var(--space-16);
}

.ai__objects {
  grid-area: objects;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
}

.ai__back {
  grid-area: 1 / 1 / 2 / 8;
}

.ai__front {
  grid-area: 1 / 4 / 2 / 11;
  margin-block-start: 30%;
}

.ai__copy {
  grid-area: copy;
  display: grid;
  gap: var(--space-6);
  align-content: center;
  justify-items: start;
}

.ai__note {
  display: grid;
  gap: var(--space-4);
  max-inline-size: 30rem;
  padding: var(--space-8) var(--space-6);
}

.ai__note > * + * {
  margin-block-start: 0;
}

/* Nota aparte, pegada con cinta */
.sticky-note {
  position: relative;
  margin-inline-start: var(--space-8);
  padding: var(--space-6) var(--space-8);
  border-radius: var(--radius-paper);
  background-color: var(--color-key-top);
  background-image: var(--texture-paper);
  background-repeat: repeat;
  box-shadow: var(--shadow-card);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.2;
}

.sticky-note::before {
  content: "";
  position: absolute;
  inset-block-start: calc(-1 * var(--space-3));
  inset-inline-start: 50%;
  inline-size: var(--space-16);
  block-size: var(--space-6);
  translate: -50% 0;
  rotate: -3deg;
  background-color: rgb(221 211 195 / 75%);
  box-shadow: var(--shadow-tape);
}

/* ---------- Sincroniza si quieres ---------- */

.sync {
  grid-template-areas:
    "title"
    "lead"
    "aside-a"
    "aside-b";
  gap: var(--space-4) var(--column-gap);
  padding-block: var(--space-12);
}

.sync__title {
  grid-area: title;
}

.sync__lead {
  grid-area: lead;
  max-inline-size: 34ch;
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.35;
}

.sync__aside {
  grid-area: aside-a;
  color: var(--color-ink-muted);
}

.sync__aside + .sync__aside {
  grid-area: aside-b;
}

/* ---------- Atajos ---------- */

.shortcuts {
  row-gap: var(--space-12);
  padding-block: var(--space-16);
}

.shortcuts__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-8);
  align-items: center;
}

.shortcuts__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12) var(--space-8);
  align-items: start;
}

.shortcut {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
}

.shortcut__keys {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-3);
}

.shortcut__label {
  max-inline-size: 16ch;
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-ink-muted);
}

/* ---------- Detalles + FAQ ---------- */

.faq {
  grid-template-areas:
    "tag"
    "stack";
  row-gap: var(--space-12);
  padding-block: var(--space-16);
}

.details-tag {
  grid-area: tag;
  place-self: start;
  display: grid;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-6) var(--space-6) var(--space-12);
  border-radius: var(--radius-paper);
  background-color: var(--color-paper);
  background-image:
    radial-gradient(circle at var(--space-6) var(--space-6), var(--color-desk-deep) 0.35rem, var(--color-paper-edge) 0.4rem, transparent 0.45rem),
    var(--texture-paper);
  background-repeat: no-repeat, repeat;
  box-shadow: var(--shadow-card);
  rotate: -2deg;
  font-size: var(--text-sm);
}

.details-tag__title {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.details-tag .plain-list {
  gap: var(--space-1);
}

.faq__stack {
  grid-area: stack;
  display: grid;
  gap: var(--space-2);
}

.faq__stack > .section-title {
  margin-block-end: var(--space-6);
}

.faq-card {
  border-radius: var(--radius-paper);
  background-color: var(--color-paper);
  background-image: var(--texture-paper);
  background-repeat: repeat;
  box-shadow: var(--shadow-card);
}

.faq-card:nth-of-type(even) {
  margin-inline-start: var(--space-4);
}

.faq-card__q {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-4);
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-paper);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.faq-card__q::-webkit-details-marker {
  display: none;
}

.faq-card__q::after {
  content: "+";
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1;
  color: var(--color-ink-muted);
}

.faq-card[open] > .faq-card__q::after {
  content: "–";
}

.faq-card__a {
  max-inline-size: var(--measure);
  padding: 0 var(--space-6) var(--space-6);
  color: var(--color-ink-muted);
}

/* ---------- Cierre ---------- */

.closing {
  padding-block: var(--space-16) var(--space-24);
}

.closing__card {
  position: relative;
  display: grid;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-6);
}

.closing__card > * + * {
  margin-block-start: 0;
}

.closing__title {
  max-inline-size: 16ch;
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.closing__lede {
  margin-block-end: var(--space-4);
}

/* Lápiz: decoración. Una pieza con clip-path para la punta */
.pencil {
  position: absolute;
  inset-block-start: calc(-1 * var(--space-4));
  inset-inline-end: var(--space-4);
  inline-size: clamp(9rem, 28vw, 19rem);
  block-size: clamp(0.625rem, 1.2vw, 0.9375rem);
  rotate: -8deg;
  background:
    linear-gradient(to right, var(--color-ink) 0 2.5%, #e8c9a0 2.5% 9%, transparent 9% 86%, #cfc7b8 86% 91%, #e59a92 91%),
    linear-gradient(#f19a55 0 33%, var(--color-accent) 33% 66%, var(--color-accent-deep) 66%);
  clip-path: polygon(0 50%, 9% 0, 100% 0, 100% 100%, 9% 100%);
  pointer-events: none;
}

/* ---------- Footer ---------- */

.footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-8);
  justify-content: space-between;
  padding-block: var(--space-8) var(--space-12);
  border-block-start: 1px solid var(--color-desk-deep);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.footer__nav a {
  color: var(--color-ink);
}

/* =========================================================
   Responsive: base una columna; 12 columnas desde 768 px
   ========================================================= */

@media (width >= 48rem) {
  .frame {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .menubar__inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .menubar__brand {
    grid-column: 1 / 7;
  }

  .menubar__status {
    grid-column: 7 / -1;
    justify-self: center;
  }

  /* El panel cuelga de la barra: la punta del PNG está al 4.6 % de su ancho */
  .hero {
    grid-template-areas:
      "copy copy copy copy copy copy object object object object object object"
      "action action action action action action object object object object object object";
    grid-template-rows: auto 1fr;
    padding-block: 0 var(--space-16);
  }

  .hero__copy {
    padding-block-start: var(--space-16);
  }

  .hero__object {
    align-self: start;
    inline-size: min(100%, 38rem);
  }

  .shot--hanging {
    margin-block-start: -4.8%;
  }

  .hero__keys {
    margin-inline-start: -4%;
    margin-block-end: 7%;
  }

  .feel {
    grid-template-areas: "object object object object object notes notes notes notes notes notes notes";
    column-gap: var(--column-gap);
    align-items: center;
  }

  .feel__object {
    inline-size: 100%;
  }

  .paper-card--lead {
    padding: var(--space-12) var(--space-8);
  }

  .feel__notes > .paper-card--lead {
    grid-column: 1 / 7;
  }

  .feel__second {
    grid-column: 4 / -1;
    margin-block-start: calc(-1 * var(--space-8));
  }

  .feel__third {
    grid-column: 1 / 6;
    margin-block-start: calc(-1 * var(--space-6));
  }

  .files {
    grid-template-areas:
      "title title title title title title title title title title title title"
      "copy copy copy copy copy tree tree tree tree tree tree tree";
    row-gap: var(--space-12);
  }

  .files__title {
    max-inline-size: none;
  }

  .media {
    grid-template-areas:
      "object object object object object object object object copy copy copy copy"
      "object object object object object object object object . . . .";
    align-items: start;
  }

  .media__source {
    grid-area: 2 / 3 / 3 / 9;
    justify-self: start;
    margin-block-start: calc(-1 * var(--space-16));
  }

  .ai {
    grid-template-areas: "copy copy copy copy copy objects objects objects objects objects objects objects";
    align-items: center;
  }

  .sync {
    grid-template-areas:
      "title title title title lead lead lead lead lead lead lead lead"
      ". . . . aside-a aside-a aside-a aside-a aside-b aside-b aside-b aside-b";
    row-gap: var(--space-6);
  }

  .sync__lead {
    font-size: var(--text-xl);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.02em;
  }

  .shortcuts > * {
    grid-column: 1 / -1;
  }

  .faq {
    grid-template-areas: "tag tag tag tag . stack stack stack stack stack stack stack";
  }

  .details-tag {
    margin-block-start: var(--space-24);
  }

  .closing__card {
    grid-column: 2 / 9;
    padding: var(--space-12);
  }

  .pencil {
    inset-block: auto var(--space-12);
    inset-inline-end: calc(-1 * clamp(9rem, 22vw, 16rem));
  }
}

@media (width >= 64rem) {
  /* La nota de Markdown se apoya sobre el hueco transparente del screenshot */
  .media__source {
    grid-area: 1 / 5 / 3 / 9;
    place-self: end start;
    margin-block: 0 calc(-1 * var(--space-8));
  }

  .hero__lede {
    font-size: var(--text-lg);
    line-height: 1.45;
  }
}

/* Sin rotaciones de papel en pantallas chicas */
@media (width < 30rem) {
  .paper-card--tilt-left,
  .paper-card--tilt-right,
  .details-tag {
    rotate: none;
  }
}

/* Movimiento mínimo, solo si la persona no pidió reducirlo */
@media (prefers-reduced-motion: no-preference) {
  .button,
  .key {
    transition: translate 120ms ease-out, box-shadow 120ms ease-out;
  }

  .button:active {
    translate: 0 2px;
  }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .button:hover {
    translate: 0 -1px;
  }

  .key:hover {
    translate: 0 1px;
    box-shadow: var(--shadow-key-pressed);
  }
}

/* =========================================================
   Added for the site on the Worker. Same tokens, same rules
   (BEM, no !important, motion only without reduced motion).
   ========================================================= */

/* ---------- Base additions ---------- */

.skip {
  position: fixed;
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
  z-index: 3;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-key);
  background-color: var(--color-paper);
  box-shadow: var(--shadow-card);
  font-size: var(--text-xs);
  font-weight: 600;
}

/* Out of sight until a keyboard reaches it. */
.skip:not(:focus-visible) {
  clip-path: inset(50%);
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
}

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

.footer {
  position: relative;
  z-index: 1;
}

.footer__credit {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
}

/* ---------- Menu bar: languages ---------- */

.menubar__inner {
  grid-template-columns: 1fr auto auto;
  column-gap: var(--space-4);
}

.langs {
  display: flex;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.langs__item {
  padding: 0.125rem var(--space-2);
  border-radius: var(--radius-paper);
  color: var(--color-ink-muted);
  text-decoration: none;
}

.langs__item--current {
  background-color: var(--color-desk-deep);
  box-shadow: var(--shadow-inset);
  color: var(--color-ink);
}

@media (hover: hover) {
  a.langs__item:hover {
    background-color: var(--color-desk);
    color: var(--color-ink);
  }
}

/* A hint, never a redirect: a strip under the menu bar, in the flow, so it covers nothing. */
.hint-lang {
  position: relative;
  z-index: 1;
  padding-block: var(--space-2);
  background-color: var(--color-desk-deep);
  box-shadow: var(--shadow-inset);
  font-size: var(--text-xs);
  font-weight: 600;
  text-align: center;
}

.hint-lang__link {
  text-decoration: none;
}

/* ---------- Join: code first, the waiting list folded under it ---------- */

.join {
  display: grid;
  gap: var(--space-4);
  max-inline-size: 34rem;
}

.tray__field--code {
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tray__field--code::placeholder {
  letter-spacing: 0.08em;
}

.tray__field[aria-invalid="true"] {
  box-shadow: var(--edge-paper), inset 0 0 0 2px var(--color-accent-deep);
}

.tray__field:focus-visible {
  box-shadow: var(--edge-paper), var(--focus-ring);
}

/* The waiting list's key is paper, not orange: one orange action per form. */
.button--quiet {
  background: linear-gradient(var(--color-key-top), #e7e1d6);
  box-shadow: var(--shadow-key);
  color: var(--color-ink);
}

.button--quiet:active {
  box-shadow: var(--shadow-key-pressed);
}

.button--quiet:focus-visible {
  box-shadow: var(--shadow-key), var(--focus-ring);
}

a.button {
  display: inline-grid;
  place-items: center;
  text-decoration: none;
}

.signup__facts {
  display: grid;
  gap: var(--space-1);
  padding: 0;
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  list-style: none;
}

/* The tick hangs in the margin, so the line stays one run of text (with its
   italics and keys) instead of flex items spaced apart. */
.signup__facts li {
  position: relative;
  padding-inline-start: 1.25em;
}

.signup__facts li::before {
  content: "✓";
  position: absolute;
  inset-inline-start: 0;
  font-family: var(--font-mono);
  color: var(--color-accent-deep);
}

.signup__status {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-paper);
  font-size: var(--text-xs);
  font-weight: 600;
}

.signup__status--error {
  background-color: var(--color-paper);
  box-shadow: var(--edge-paper), inset 3px 0 0 var(--color-accent-deep);
  color: var(--color-accent-deep);
}

.signup__status--done {
  background-color: var(--color-paper);
  box-shadow: var(--shadow-card);
}

.waitlist__toggle {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  list-style: none;
  cursor: pointer;
}

.waitlist__toggle::-webkit-details-marker {
  display: none;
}

.waitlist__form {
  padding-block-start: var(--space-3);
}

/* A plus that turns into a minus: the vertical bar folds flat. */
.morph {
  display: inline-grid;
  flex: none;
  inline-size: 0.875rem;
  block-size: 0.875rem;
}

.morph::before,
.morph::after {
  content: "";
  grid-area: 1 / 1;
  place-self: center;
  inline-size: 100%;
  block-size: 2px;
  border-radius: 1px;
  background-color: currentcolor;
}

.morph::after {
  rotate: 90deg;
}

details[open] > summary > .morph::after {
  rotate: 0deg;
}

.morph--small {
  inline-size: 0.625rem;
  block-size: 0.625rem;
}

.faq-card__q::after {
  content: none;
}

.faq-card__q > .morph {
  color: var(--color-ink-muted);
}

/* ---------- Documents: a sheet of paper with a file tab ---------- */

.doc {
  padding-block: var(--space-12) var(--space-16);
}

.sheet {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  inline-size: 100%;
  max-inline-size: 46rem;
  justify-self: center;
  padding: var(--space-12) var(--space-6) var(--space-8);
  border-radius: var(--radius-paper);
  background-color: var(--color-paper);
  background-image: var(--texture-paper);
  box-shadow: var(--shadow-card);
}

.sheet > * {
  max-inline-size: var(--measure);
}

.sheet__tab {
  place-self: start;
  margin-block: calc(-1 * var(--space-16)) var(--space-4);
  box-shadow: var(--shadow-card);
}

.sheet__title {
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.sheet__meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

.sheet__lede {
  font-size: var(--text-lg);
  line-height: 1.45;
}

.sheet h2 {
  margin-block-start: var(--space-6);
  font-size: var(--text-md);
  font-weight: 600;
}

.sheet p,
.sheet li {
  font-size: var(--text-sm);
}

.sheet .sheet__lede {
  font-size: var(--text-lg);
}

.sheet__list {
  display: grid;
  gap: var(--space-2);
  padding-inline-start: var(--space-6);
}

.sheet__list--steps li::marker {
  font-family: var(--font-mono);
  color: var(--color-accent-deep);
}

.sheet__form {
  margin-block-start: var(--space-4);
}

.sheet__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  margin-block-start: var(--space-4);
}

.sheet__actions > form {
  display: contents;
}

.sheet__actions .button {
  flex: 0 0 auto;
}

.sheet__refs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.sheet__refs .file-chip {
  text-decoration: none;
}

.sheet__back {
  margin-block-start: var(--space-8);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--color-paper-edge);
}

.doc__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  justify-content: center;
  margin-block-start: var(--space-6);
  font-size: var(--text-xs);
}

.link-button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

/* A rubber stamp on the sheet: the code worked, the place is saved. */
.stamp {
  float: inline-end;
  padding: var(--space-1) var(--space-3);
  border: 2px solid var(--color-accent-deep);
  border-radius: var(--radius-paper);
  rotate: -8deg;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--color-accent-deep);
  opacity: 0.85;
}

.check {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  margin-block: var(--space-3);
  font-size: var(--text-sm);
  cursor: pointer;
}

.check__box {
  flex: none;
  inline-size: 1.05rem;
  block-size: 1.05rem;
  accent-color: var(--color-accent);
}

/* ---------- The testers' wall: pictures pinned to the sheet ---------- */

.wall {
  display: grid;
  gap: var(--space-2);
  margin-block-start: var(--space-8);
  padding-block-start: var(--space-6);
  border-block-start: 1px dashed var(--color-paper-edge);
}

.wall__title {
  font-size: var(--text-md);
}

.wall__count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

.wall__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: 0;
  list-style: none;
}

.wall__item {
  padding: 3px;
  border-radius: var(--radius-pill);
  background-color: var(--color-key-top);
  box-shadow: var(--shadow-chip);
  rotate: calc((var(--i, 0) - 3) * 1.5deg);
}

.wall__item img {
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: var(--radius-pill);
  object-fit: cover;
}

@media (width >= 48rem) {
  .menubar__inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .menubar__status {
    grid-row: 1;
  }

  .menubar__tools {
    grid-column: 10 / -1;
    grid-row: 1;
    justify-self: end;
  }

  .sheet {
    grid-column: 2 / 12;
    padding: var(--space-16) var(--space-12) var(--space-12);
  }

  .sheet__tab {
    margin-block-start: calc(-1 * var(--space-16) - var(--space-4));
  }

  .doc__links {
    grid-column: 1 / -1;
  }
}

@media (width < 30rem) {
  .stamp,
  .wall__item {
    rotate: none;
  }

  /* The form stays in the first screen of a phone. */
  .hero__object {
    inline-size: min(100%, 16.5rem);
  }
}

/* ---------- The desk light (WebGL, site.js) ---------- */

.desk-light {
  position: fixed;
  inset: 0;
  z-index: 0;
  inline-size: 100%;
  block-size: 100%;
  mix-blend-mode: soft-light;
  opacity: 0;
  pointer-events: none;
}

.desk-light--on {
  opacity: 1;
}

/* =========================================================
   Motion. The hero presses ⌥ Space and
   the panel drops from the menu bar; paper settles on the
   desk as it scrolls in; keys press. Nothing moves when the
   person asks for less motion.
   ========================================================= */

/* No cross-document view transitions here: Chrome aborts them now and then
   while a page runs script, and leaves a rejected promise in the console.
   Each page brings its own entrance instead (the panel, the sheet, the paper). */

@media (prefers-reduced-motion: no-preference) {
  .desk-light {
    transition: opacity 1200ms ease-out;
  }

  /* Hero: ⌥, then Space, then the panel falls from the bar. */
  .key--intro {
    animation: key-press 360ms cubic-bezier(0.3, 0.7, 0.3, 1) both;
    animation-delay: 380ms;
  }

  .key--intro + .key--intro {
    animation-delay: 520ms;
  }

  .shot--hanging {
    animation: hang 900ms cubic-bezier(0.2, 0.8, 0.2, 1) 640ms both;
    transform-origin: 50% 0;
  }

  .hero__copy,
  .hero__action {
    animation: settle 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  .hero__action {
    animation-delay: 120ms;
  }

  .sheet {
    animation: settle 520ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  .stamp {
    animation: stamp 420ms cubic-bezier(0.3, 1.6, 0.5, 1) 300ms both;
  }

  .wall__item {
    animation: settle 420ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(var(--i, 0) * 60ms + 200ms);
  }

  .hint-lang:not([hidden]) {
    animation: settle 420ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  .morph::after,
  .morph::before {
    transition: rotate 260ms cubic-bezier(0.3, 0.7, 0.3, 1);
  }

  .tray {
    transition: box-shadow 200ms ease-out;
  }

  .tray:focus-within {
    box-shadow: var(--shadow-inset), 0 0 0 1px var(--color-paper-edge);
  }

  .tray__field {
    transition: box-shadow 160ms ease-out, translate 160ms ease-out;
  }

  .tray__field:focus-visible {
    translate: 0 -1px;
  }

  .tray__field[aria-invalid="true"] {
    animation: nudge 360ms cubic-bezier(0.3, 0.7, 0.3, 1) both;
  }

  .signup__status {
    animation: settle 420ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  /* Open and close the folded parts with their height (where supported). */
  .faq-card,
  .waitlist {
    interpolate-size: allow-keywords;
  }

  .faq-card::details-content,
  .waitlist::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size 320ms cubic-bezier(0.2, 0.7, 0.2, 1), content-visibility 320ms allow-discrete;
  }

  .faq-card[open]::details-content,
  .waitlist[open]::details-content {
    block-size: auto;
  }

  .faq-card {
    transition: translate 200ms ease-out, box-shadow 200ms ease-out;
  }

  .link-button,
  .langs__item {
    transition: color 160ms ease-out, background-color 160ms ease-out;
  }

  /* The key goes down while the form is on its way. */
  .button[aria-busy="true"] {
    translate: 0 2px;
    box-shadow: var(--shadow-button-pressed);
    cursor: progress;
  }

  .button--quiet[aria-busy="true"] {
    box-shadow: var(--shadow-key-pressed);
  }

}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .faq-card:hover {
    translate: 0 -1px;
    box-shadow: var(--edge-paper), 0 1px 1px rgb(60 40 20 / 14%), 0 20px 30px -14px rgb(60 40 20 / 46%);
  }

  .link-button:hover {
    color: var(--color-ink);
  }
}

@keyframes settle {
  from {
    opacity: 0;
    translate: 0 8px;
  }
}

@keyframes drop {
  from {
    opacity: 0;
    translate: 0 -14px;
    scale: 1.02;
  }
}

@keyframes slide {
  from {
    opacity: 0;
    translate: -12px 0;
  }
}

@keyframes hang {
  from {
    opacity: 0;
    translate: 0 -28px;
    scale: 0.985;
  }
}

@keyframes key-press {
  45% {
    translate: 0 2px;
    box-shadow: var(--shadow-key-pressed);
  }
}

@keyframes stamp {
  from {
    opacity: 0;
    scale: 1.6;
  }
}

@keyframes nudge {
  25% {
    translate: -3px 0;
  }

  75% {
    translate: 3px 0;
  }
}

/* Long Markdown fragments may break inside narrow text columns (768 px). */
.media__copy {
  min-inline-size: 0;
}

.media__copy .inline-file {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* ---------- Fixes after the owner's review ---------- */

/* The keys over the panel: frosted, so the panel shows through, blurred. */
.hero__keys .key {
  background: rgb(253 251 247 / 72%);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
}

/* The folded corner is cut from the paper: the desk shows through the gap,
   and the flap is the back of the sheet, folded down. The paper and the flap
   are pseudo-elements so only the paper is cut; the shadow follows the cut. */
.paper-card--corner {
  --fold: var(--space-8);
  isolation: isolate;
  background: none;
  box-shadow: none;
  filter: drop-shadow(0 1px 1px rgb(60 40 20 / 14%)) drop-shadow(0 12px 12px rgb(60 40 20 / 22%));
}

.paper-card--corner::before {
  content: "";
  /* the desk shows through the cut corner */
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--radius-paper);
  background-color: var(--color-paper);
  background-image: var(--texture-paper);
  box-shadow: inset 0 0 0 1px var(--color-paper-edge);
  clip-path: polygon(0 0, calc(100% - var(--fold)) 0, 100% var(--fold), 100% 100%, 0 100%);
}

.paper-card--corner::after {
  inline-size: var(--fold);
  block-size: var(--fold);
  border-start-end-radius: 0;
  border-end-start-radius: var(--radius-paper);
  /* The back of the sheet: shaded at its corner, catching the light at the fold. */
  background: linear-gradient(45deg, #ddd2c0 0%, #ebe3d5 30%, #f7f2ea 49%, var(--color-paper-edge) 50%, transparent 50%);
  box-shadow: none;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  filter: drop-shadow(-2px 3px 3px rgb(60 40 20 / 30%));
}

/* One sign only: the plus that folds into a minus. */
.faq-card[open] > .faq-card__q::after {
  content: none;
}

/* The pencil is drawn (SVG), not painted with gradients. */
.pencil {
  block-size: auto;
  background: none;
  clip-path: none;
  overflow: visible;
}

/* ---------- Sound switch, next to the languages ---------- */

.menubar__tools {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.sound-switch {
  display: inline-grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-paper);
  background: none;
  color: var(--color-ink-muted);
  cursor: pointer;
}

.sound-switch[aria-pressed="true"] .sound-switch__off,
.sound-switch[aria-pressed="false"] .sound-switch__waves {
  display: none;
}

@media (hover: hover) {
  .sound-switch:hover {
    background-color: var(--color-desk);
    color: var(--color-ink);
  }
}

/* The big keys can be pressed: they go down, and they sound. */
.shortcut__keys .key {
  cursor: pointer;
  user-select: none;
}

.shortcut__keys .key:active {
  translate: 0 2px;
  box-shadow: var(--shadow-key-pressed);
}

/* The panel hangs over the menu bar; clicks go through it to the bar. */
.shot--hanging {
  pointer-events: none;
}

/* Without the script there are no sounds, so no switch either. */
.sound-switch[hidden] {
  display: none;
}

@media (width < 48rem), (pointer: coarse) {
  .sound-switch {
    inline-size: 2.25rem;
    block-size: 2.25rem;
  }

  .langs__item {
    padding-block: var(--space-2);
  }
}

/* ---------- A shared note: Markdown on the sheet ---------- */

.note {
  display: grid;
  gap: var(--space-3);
  font-size: var(--text-md);
}

.note > * {
  max-inline-size: var(--measure);
  margin: 0;
}

.note h1,
.note h2,
.note h3 {
  margin-block-start: var(--space-4);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.note h1 {
  margin-block-start: 0;
  font-size: var(--text-xl);
}

.note h2 {
  font-size: var(--text-lg);
}

.note h3 {
  font-size: var(--text-md);
}

.note ul,
.note ol {
  display: grid;
  gap: var(--space-1);
  padding-inline-start: var(--space-6);
}

.note li.task {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  margin-inline-start: calc(-1 * var(--space-6));
  list-style: none;
}

.note li.task .box {
  display: grid;
  flex: none;
  place-items: center;
  align-self: center;
  inline-size: 1rem;
  block-size: 1rem;
  border-radius: 4px;
  background-color: var(--color-paper);
  box-shadow: var(--edge-paper), var(--shadow-inset);
  font-size: 0.65rem;
  line-height: 1;
}

.note li.task.done {
  color: var(--color-ink-muted);
  text-decoration: line-through;
}

.note blockquote {
  padding-inline-start: var(--space-4);
  border-inline-start: 3px solid var(--color-accent);
  color: var(--color-ink-muted);
}

.note pre {
  overflow-x: auto;
  padding: var(--space-4);
  border-radius: var(--radius-key);
  background-color: var(--color-device);
  box-shadow: var(--shadow-display);
  font: var(--text-sm) / 1.5 var(--font-mono);
  color: var(--color-device-text);
}

.note :not(pre) > code {
  padding: 0.05em 0.3em;
  border-radius: var(--radius-paper);
  background-color: var(--color-desk);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.note hr {
  inline-size: 100%;
  border: 0;
  border-block-start: 1px dashed var(--color-paper-edge);
}

.note figure {
  margin-block: var(--space-2);
}

.note img {
  max-inline-size: 100%;
  border-radius: var(--radius-paper);
  box-shadow: var(--shadow-card);
}

.note audio {
  inline-size: 100%;
}

/* ---------- Desk blend (trial): Ivory → Coral Glaze, with a fine grain ----------
   From the owner's "Untitled blend", inverted: a vertical oklab gradient from
   #F8F4E6 at the top to #E3DBBF at the bottom under the paper texture, fixed to the window so the whole desk
   shares one light, and a 256 px grain in overlay at 2 %. The tokens are
   untouched; remove this block to go back to the flat desk. */

.desk {
  background-color: var(--color-desk);
  background-image:
    var(--texture-desk),
    linear-gradient(180deg, oklch(96.6% 0.019 93.7) 25%, oklch(89% 0.0383 93.9) 75%);
  background-image:
    var(--texture-desk),
    linear-gradient(180deg in oklab, oklch(96.6% 0.019 93.7) 25%, oklch(89% 0.0383 93.9) 75%);
  background-repeat: repeat, no-repeat;
  background-attachment: scroll, fixed;
}

.desk::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background: url("../img/grain.webp") repeat;
  background-size: 256px 256px;
  image-rendering: pixelated;
  mix-blend-mode: overlay;
  opacity: 0.02;
  pointer-events: none;
}

/* ---------- Entering the viewport ----------
   site.js marks what should enter (.will-enter, with a gesture) and adds
   .is-in once it is on screen. Without the script, or with reduced motion,
   nothing is hidden. */

@media (prefers-reduced-motion: no-preference) {
  .will-enter {
    transition:
      opacity 620ms cubic-bezier(0.2, 0.7, 0.2, 1),
      translate 620ms cubic-bezier(0.2, 0.7, 0.2, 1),
      scale 620ms cubic-bezier(0.2, 0.7, 0.2, 1),
      box-shadow 620ms cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: calc(var(--enter-i, 0) * 70ms);
  }

  .will-enter:not(.is-in) {
    opacity: 0;
    translate: 0 14px;
  }

  /* Paper drops onto the desk. */
  .will-enter--drop:not(.is-in) {
    translate: 0 -16px;
    scale: 1.03;
  }

  /* Chips and files slide in from the folder's side. */
  .will-enter--slide:not(.is-in) {
    translate: -18px 0;
  }

  /* Screenshots rise a little further, like an object set down. */
  .will-enter--object:not(.is-in) {
    translate: 0 28px;
    scale: 0.985;
  }

  /* Keys arrive pressed and come up. */
  .will-enter--key:not(.is-in) {
    opacity: 0;
    translate: 0 3px;
    box-shadow: var(--shadow-key-pressed);
  }
}

/* ---------- Confetti (site.js), over everything, clicks pass through ---------- */

.confetti {
  position: fixed;
  inset: 0;
  z-index: 10;
  inline-size: 100%;
  block-size: 100%;
  pointer-events: none;
}

/* ---------- The credit: Jorge and Cajú, on hover, focus or tap ---------- */

.credit {
  position: relative;
  border-radius: var(--radius-paper);
  cursor: default;
  text-decoration: underline dotted;
  text-decoration-color: var(--color-paper-edge);
  text-underline-offset: 0.3em;
}

.credit:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* A polaroid: paper frame, a strip of tape, a slight tilt. */
.credit__photo {
  position: absolute;
  inset-block-end: calc(100% + var(--space-3));
  inset-inline-start: 0;
  z-index: 3;
  display: block;
  inline-size: max-content;
  padding: var(--space-2) var(--space-2) var(--space-6);
  border-radius: 3px;
  background-color: var(--color-key-top);
  background-image: var(--texture-paper);
  box-shadow: var(--shadow-card), 0 24px 40px -18px rgb(40 25 10 / 55%);
  opacity: 0;
  rotate: -4deg;
  translate: 0 10px;
  scale: 0.92;
  transform-origin: 20% 100%;
  visibility: hidden;
  pointer-events: none;
}

.credit__photo::before {
  content: "";
  position: absolute;
  inset-block-start: calc(-1 * var(--space-2));
  inset-inline-start: 50%;
  inline-size: var(--space-12);
  block-size: var(--space-4);
  translate: -50% 0;
  rotate: 4deg;
  background-color: rgb(221 211 195 / 80%);
  box-shadow: var(--shadow-tape);
}

.credit__photo img {
  display: block;
  max-inline-size: none;
  inline-size: 11rem;
  block-size: 11rem;
  border-radius: 2px;
  object-fit: cover;
}

.credit:hover .credit__photo,
.credit:focus .credit__photo,
.credit:focus-within .credit__photo {
  opacity: 1;
  rotate: -3deg;
  translate: 0 0;
  scale: 1;
  visibility: visible;
}

@media (prefers-reduced-motion: no-preference) {
  .credit__photo {
    transition:
      opacity 220ms ease-out,
      translate 520ms cubic-bezier(0.3, 1.5, 0.5, 1),
      rotate 520ms cubic-bezier(0.3, 1.5, 0.5, 1),
      scale 520ms cubic-bezier(0.3, 1.5, 0.5, 1),
      visibility 0s linear 220ms;
  }

  .credit:hover .credit__photo,
  .credit:focus .credit__photo,
  .credit:focus-within .credit__photo {
    transition-delay: 0s;
  }

  /* Once out, it sways a little, like held between two fingers. */
  .credit:hover .credit__photo img {
    animation: sway 3.2s ease-in-out 520ms infinite;
  }
}

@keyframes sway {
  50% {
    rotate: 1.5deg;
  }
}

/* Shipibo Studio in its own red (#FE1917, from its mark). */
.studio {
  --studio-red: #fe1917;
  color: var(--studio-red);
  font-weight: 500;
  text-decoration: none;
  text-underline-offset: 0.25em;
}

.studio:hover,
.studio:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

/* ---------- Installing: a terminal line with a copy key ---------- */

.install {
  margin-block-start: var(--space-8);
  padding-block-start: var(--space-6);
  border-block-start: 1px dashed var(--color-paper-edge);
}

.install h2 {
  margin-block-start: 0;
}

.command {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-block-start: var(--space-2);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border-radius: var(--radius-key);
  background-color: var(--color-device);
  box-shadow: var(--shadow-display);
}

.command code {
  flex: 1 1 16rem;
  min-inline-size: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-device-text);
  overflow-wrap: anywhere;
  user-select: all;
}

.command__copy {
  flex: none;
  padding: var(--space-1) var(--space-3);
  border: 0;
  border-radius: var(--radius-key);
  background: linear-gradient(var(--color-key-top), #e7e1d6);
  box-shadow: var(--shadow-key);
  font: 600 var(--text-xs) / 1.4 var(--font-sans);
  color: var(--color-ink);
  cursor: pointer;
}

.command__copy[hidden] {
  display: none;
}

.command__copy:active {
  translate: 0 2px;
  box-shadow: var(--shadow-key-pressed);
}

/* In-page links glide (skip links, #join, #closing); not with reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* A key that is not ready yet: flat, faded, it does not press. */
.button:disabled {
  opacity: 0.45;
  box-shadow: 0 1px 0 var(--color-accent-deep);
  translate: none;
  cursor: not-allowed;
}

.signup__status[hidden] {
  display: none;
}

/* ---------- Text markup (site/rich.ts) ---------- */

/* MarkitoBar, always in bold; other names in italics; emphasis. */
.brand-name,
strong {
  font-weight: 600;
}

/* A key inside a sentence: a small keycap on the line. */
.kbd {
  display: inline-block;
  padding: 0.05em 0.45em;
  margin-inline: 0.1em;
  border-radius: 5px;
  background: linear-gradient(var(--color-key-top), #e7e1d6);
  box-shadow: 0 2px 0 var(--color-key-side), 0 3px 5px -2px rgb(60 40 20 / 30%);
  font: 600 0.82em / 1.35 var(--font-sans);
  color: var(--color-ink);
  white-space: nowrap;
  vertical-align: 0.08em;
}

/* =========================================================
   The challenge: "mark the 4 who are not devs" (game.js).
   A sheet over the desk, the portraits in one warm duotone
   (so colour gives nothing away), the hose that takes them,
   and the code in the dark readout when it is won.
   ========================================================= */

/* The hero's keys are buttons now: they press. */
.key--button {
  border: 0;
  font: 600 var(--text-sm) / 1 var(--font-sans);
  cursor: pointer;
}

.key--button:active {
  translate: 0 2px;
  box-shadow: var(--shadow-key-pressed);
}

.key--button:focus-visible {
  box-shadow: var(--shadow-key), var(--focus-ring);
}

.signup__slots {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-accent-deep);
}

.signup__slots.is-out {
  color: var(--color-ink-muted);
}

.signup__hint {
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

.signup.is-closed .tray {
  opacity: 0.6;
}

.game {
  inline-size: 100vw;
  max-inline-size: 100vw;
  block-size: 100dvh;
  max-block-size: 100dvh;
  margin: 0;
  padding: var(--space-4);
  border: 0;
  background: transparent;
  overflow: auto;
}

.game::backdrop {
  background-color: rgb(239 233 223 / 82%);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.game__sheet {
  position: relative;
  display: grid;
  gap: var(--space-3);
  justify-items: center;
  inline-size: min(100%, 34rem);
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-6);
  border-radius: var(--radius-paper);
  background-color: var(--color-paper);
  background-image: var(--texture-paper);
  box-shadow: var(--shadow-card), 0 40px 80px -30px rgb(40 25 10 / 45%);
  text-align: center;
  overflow: hidden;
}

.game__close {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-end: var(--space-3);
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-desk);
  font: 400 1.4rem / 1 var(--font-sans);
  color: var(--color-ink);
  cursor: pointer;
}

.game__title {
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.game__lead {
  max-inline-size: 30ch;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.game__progress {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-accent-deep);
}

.game__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  inline-size: 100%;
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}

.game__tile {
  position: relative;
  display: block;
  inline-size: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background-color: var(--color-desk-deep);
  box-shadow: var(--shadow-key);
  cursor: pointer;
  overflow: hidden;
}

.game__tile img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* One warm duotone for every portrait: old photos and new look alike. */
  filter: grayscale(1) sepia(0.45) contrast(1.05) brightness(1.02);
}

.game__tile[aria-pressed="true"] {
  box-shadow: 0 0 0 3px var(--color-accent), var(--shadow-key);
}

.game__check {
  position: absolute;
  inset-block-end: 6px;
  inset-inline-end: 6px;
  inline-size: 1.6rem;
  block-size: 1.6rem;
  border: 2px solid var(--color-paper);
  border-radius: var(--radius-pill);
  background: rgb(29 27 24 / 25%);
}

.game__tile[aria-pressed="true"] .game__check {
  border-color: var(--color-paper);
  background: var(--color-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%231a0b03' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 75% no-repeat;
}

/* A vacuumed tile leaves its place empty. */
.game__tile.is-gone {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--color-paper-edge);
  cursor: default;
}

.game__tile.is-gone > * {
  visibility: hidden;
}

.game__ghost {
  position: fixed;
  z-index: 2;
  object-fit: cover;
  border-radius: 12px;
  filter: grayscale(1) sepia(0.45) contrast(1.05);
  pointer-events: none;
}

.game__say {
  min-block-size: 2.8em;
  font-size: var(--text-sm);
  font-weight: 500;
}

.game__say[data-tone="wrong"] {
  color: var(--color-accent-deep);
}

.game__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

.game__actions .button {
  flex: 0 0 auto;
}

/* The vacuum, over everything in the game, parked off-screen until it works. */
.vacuum {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 3;
  inline-size: 280px;
  transform: translate(calc(100vw + 40px), calc(100dvh + 40px));
  filter: drop-shadow(0 18px 20px rgb(40 25 10 / 45%));
  pointer-events: none;
}

.vacuum__svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
  /* The hose runs on, off the edge of the screen. */
  overflow: visible;
}

/* Air rushing into the mouth: short lines streaking right. */
.vacuum__air {
  position: absolute;
  inset-inline-start: -46px;
  inline-size: 40px;
  block-size: 2px;
  border-radius: 2px;
  background: linear-gradient(to right, transparent, rgb(29 27 24 / 55%));
  opacity: 0;
}

.vacuum__air:nth-of-type(1) { inset-block-start: 56px; }
.vacuum__air:nth-of-type(2) { inset-block-start: 70px; }
.vacuum__air:nth-of-type(3) { inset-block-start: 84px; }

.vacuum.is-sucking .vacuum__svg {
  animation: rattle 1700ms linear;
}

.vacuum.is-sucking .vacuum__air {
  animation: air 1700ms linear;
}

.vacuum.is-sucking .vacuum__air:nth-of-type(2) { animation-delay: 60ms; }
.vacuum.is-sucking .vacuum__air:nth-of-type(3) { animation-delay: 120ms; }

@keyframes rattle {
  0%, 30%, 76%, 100% { translate: 0 0; }
  38%, 46%, 54%, 62% { translate: 0 -1px; }
  42%, 50%, 58%, 66% { translate: 0 1px; }
}

@keyframes air {
  0%, 30% { opacity: 0; translate: 0 0; }
  40% { opacity: 1; translate: -10px 0; }
  48%, 56%, 64% { opacity: 1; translate: 14px 0; }
  44%, 52%, 60% { opacity: 0.4; translate: -10px 0; }
  74%, 100% { opacity: 0; translate: 14px 0; }
}

.game__credits {
  inline-size: 100%;
  margin-block-start: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  text-align: start;
}

.game__credits summary {
  cursor: pointer;
  text-align: center;
}

.game__credits ul {
  display: grid;
  gap: var(--space-1);
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}

/* Won: the code in the dark readout, glowing. */
.game__sheet.is-over {
  padding-block: var(--space-12);
}

.game__glow {
  position: absolute;
  inset: -40%;
  z-index: 0;
  background: radial-gradient(circle at 50% 45%, rgb(226 98 31 / 30%), rgb(247 174 109 / 12%) 30%, transparent 60%);
  pointer-events: none;
}

.game__sheet.is-over > :not(.game__glow, .game__close) {
  position: relative;
  z-index: 1;
}

.game__close {
  z-index: 2;
}

.game__code {
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-key);
  background-color: var(--color-device);
  box-shadow: var(--shadow-display);
  font-family: var(--font-mono);
  font-size: clamp(1.2rem, 1rem + 1.5vw, 1.75rem);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--color-accent);
  text-shadow: 0 0 12px rgb(226 98 31 / 50%);
  user-select: all;
}

/* The supernova before the beta: a flash that grows and fades. */
.supernova {
  position: fixed;
  z-index: 11;
  inline-size: 24px;
  block-size: 24px;
  margin: -12px 0 0 -12px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgb(247 174 109 / 90%) 30%, rgb(226 98 31 / 45%) 55%, transparent 70%);
  pointer-events: none;
  animation: supernova 800ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

@keyframes supernova {
  to {
    transform: scale(60);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .game[open] .game__sheet {
    animation: hang 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }

  .game__tile {
    transition: box-shadow 160ms ease-out, translate 120ms ease-out;
  }

  .game__tile:active:not(.is-gone) {
    translate: 0 2px;
  }

  .game__glow {
    animation: glow 2.4s ease-in-out infinite alternate;
  }

  .game__code {
    animation: stamp 520ms cubic-bezier(0.3, 1.6, 0.5, 1) both;
  }
}

@keyframes glow {
  from {
    opacity: 0.7;
    scale: 0.95;
  }

  to {
    opacity: 1;
    scale: 1.05;
  }
}

@media (width < 30rem) {
  .game {
    padding: var(--space-2);
  }

  .game__sheet {
    padding: var(--space-8) var(--space-3) var(--space-4);
  }

  .game__grid {
    gap: var(--space-2);
  }
}

/* Long addresses on a sheet (a tester's email) wrap instead of widening the page. */
.sheet p,
.sheet li {
  overflow-wrap: anywhere;
}

/* The stamp sits in the sheet's corner, only as wide as its word
   (the sheet is a grid, where a float does nothing). */
.stamp {
  float: none;
  justify-self: end;
  inline-size: fit-content;
  margin-block-end: calc(-1 * var(--space-8));
}

/* The game's grid while it is dealt: blank tiles, breathing. */
.game__tile--loading {
  cursor: progress;
  background: linear-gradient(110deg, var(--color-desk-deep) 30%, var(--color-desk) 50%, var(--color-desk-deep) 70%) 0 0 / 250% 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .game__tile--loading {
    animation: shimmer 1.3s linear infinite;
  }

  .game__grid:not([aria-busy]) .game__tile {
    animation: settle 360ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
}

@keyframes shimmer {
  to {
    background-position: -250% 0;
  }
}

/* ---------- Things on the desk (margins only, drift on scroll) ---------- */

.desk-things {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.desk-thing {
  position: absolute;
  translate: 0 var(--drift, 0px);
  filter: drop-shadow(0 1px 0 rgb(255 255 255 / 40%));
}

/* In the margin beside the 80rem frame, never over the copy. */
.desk-thing--clip {
  inset-block-start: 1080px;
  inset-inline-start: calc((100% - 80rem) / 4 - 17px);
  inline-size: 34px;
  rotate: -18deg;
}

.desk-thing--binder {
  inset-block-start: 2350px;
  inset-inline-end: calc((100% - 80rem) / 4 - 28px);
  inline-size: 56px;
  rotate: 12deg;
}

.desk-thing--eraser {
  inset-block-start: 3520px;
  inset-inline-start: calc((100% - 80rem) / 4 - 40px);
  inline-size: 80px;
  rotate: -74deg;
}

.desk-thing--ring {
  inset-block-start: 1650px;
  inset-inline-end: -80px;
  inline-size: 200px;
}

/* Only where the margin can hold them. */
@media (width < 88rem) {
  .desk-things {
    display: none;
  }
}

/* The screenshots and loose notes drift with the scroll (site.js sets --drift). */
.feel__object,
.media__object,
.ai__objects,
.sticky-note,
.details-tag {
  translate: 0 var(--drift, 0px);
}

/* ---------- Chromatic words (slot-text) ---------- */

/* A rolled word keeps the line it sits on: slot-text's cells use 1.3 by default. */
[data-motion-word] .char-slot {
  line-height: inherit;
}

[data-motion-word].slot-text {
  vertical-align: baseline;
}

/* The sign-in link at the top of the public pages. */
.menubar__signin {
  font-size: var(--text-xs);
  font-weight: 600;
  text-decoration: none;
}

@media (hover: hover) {
  .menubar__signin:hover {
    text-decoration: underline;
  }
}

/* On the smallest phones the menu bar has no room for it; the footer keeps it. */
@media (width < 24rem) {
  .menubar__signin {
    display: none;
  }
}