:root {
    --ground: #F5EFE4;
    --surface: #FFFCF7;
    --featured: #EADFCB;
    --ink: #2A1C13;
    --muted: #6A5242;
    --body: #4A3628;
    --on-action: #F5EFE4;
    --curation: #56633A;
    --line: #E0D3BE;
    --illus: #B4865B;
    --tape: #E3D1B4;
    --stamp: #A4482A;
    --wood:
      repeating-linear-gradient(178deg, rgba(90, 52, 28, 0) 0 7px, rgba(90, 52, 28, 0.12) 7px 8px, rgba(90, 52, 28, 0) 8px 15px),
      linear-gradient(180deg, #C69A6B, #A97B4E);
    --white: #FFFFFF;
    --archive-ground: #EFE5D4;
    --archive-surface: #F7EEDF;
    --archive-line: #DCCBB0;
    --control: #8F7A66;
    --handle: #D9CBB4;
    --disabled: #A8968A;
    --on-disabled: #F5EFE4;
    --error-bg: #FBEDE6;
    --error-border: #C9846A;
    --error-ink: #6E2A16;
    --error-icon: #9B3D22;
    --consent-ink: #3B2A1E;
    --sticky-cta: 96px;
    /* Fita das fotos e dos recortes: mais clara que o papel pardo, com bordo e sombra, para se ver nele e na polaroid. */
    --photo-tape: rgba(247, 243, 234, 0.84);
    --photo-tape-edge: 0 0 0 1px rgba(42, 28, 19, 0.1), 0 1px 2px rgba(42, 28, 19, 0.2);
    color-scheme: light;
  }
  * { box-sizing: border-box; }
  [hidden] { display: none !important; }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  html, body { margin: 0; }
  html {
    scroll-padding-bottom: var(--sticky-cta);
    /* Cor sólida no html: overscroll no iOS e fallback se o ::before falhar. */
    background-color: var(--ground);
  }
  html[data-moment="manha"] { --ground: #F7F2E9; }
  html[data-moment="noite"] { --ground: #EDE3D3; }
  /*
   * Papel: grão fino, fibras longas como em papel feito à mão, uma trama de linho quase
   * invisível e a borda a escurecer de leve. Parado, por trás de tudo.
   *
   * A lavagem vive em body::before (position:fixed), não em background-attachment:fixed:
   * o Safari iOS não aplica fixed nesses layers e pintava um rectângulo bege mais escuro
   * no canto superior esquerdo (visível em /entrar e no OTP).
   */
  body {
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .11 0 0 0 0 .07 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --kraft-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .30 0 0 0 0 .20 0 0 0 0 .10 0 0 0 1.1 -.5'/%3E%3C/filter%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .4' numOctaves='3' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .32 0 0 0 0 .18 0 0 0 1.5 -.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='.55'/%3E%3C/svg%3E");
    --fiber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .55' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .32 0 0 0 0 .26 0 0 0 .09 -.02'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
    --linen:
      repeating-linear-gradient(0deg, rgba(106, 82, 66, 0.022) 0 1px, transparent 1px 3px),
      repeating-linear-gradient(90deg, rgba(106, 82, 66, 0.018) 0 1px, transparent 1px 4px);
    --vignette: radial-gradient(130% 95% at 50% 38%, rgba(106, 82, 66, 0) 62%, rgba(106, 82, 66, 0.09) 100%);
    --hour-light: linear-gradient(transparent, transparent);
    background-color: transparent;
    color: var(--ink);
    font-family: "Instrument Sans", system-ui, sans-serif;
  }
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: var(--ground);
    background-image: var(--vignette), var(--hour-light), var(--fiber), var(--linen), var(--grain);
    background-repeat: no-repeat, no-repeat, repeat, repeat, repeat;
  }
  html[data-moment="manha"] body {
    --hour-light: radial-gradient(120% 46% at 12% -8%, rgba(255, 250, 236, 0.95), rgba(255, 250, 236, 0) 70%);
  }
  html[data-moment="tarde"] body {
    --hour-light: radial-gradient(90% 40% at 88% -6%, rgba(239, 196, 138, 0.45), rgba(239, 196, 138, 0) 70%);
  }
  html[data-moment="noite"] body {
    --hour-light: radial-gradient(110% 52% at 50% -14%, rgba(242, 214, 160, 0.6), rgba(242, 214, 160, 0) 72%);
  }
  a:focus-visible, button:focus-visible, textarea:focus-visible, input:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
  }
  .photo-button:has(input:focus-visible), .choice:has(input:focus-visible) {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
  }
  .screen {
    width: min(100%, 390px);
    min-height: 100dvh;
    margin: 0 auto;
    padding: 28px 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 22px;
  }
  .memory-screen { padding-bottom: 0; }
  /* As duas vistas acabam igual: o rodapé encosta à barra de ação, e a barra ao fundo do ecrã. */
  .memory-screen > .footer, .reader > .footer { margin-top: auto; }
  .place-bar, .topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }
  .place-name {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.24em;
  }
  .city, .meta, .eyebrow {
    color: var(--muted);
  }
  .city { font-size: 0.75rem; letter-spacing: 0.04em; }
  .eyebrow-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .eyebrow-row .meta { font-size: 0.84375rem; white-space: nowrap; }
  .eyebrow {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.16em;
  }
  h1, h2, .serif, .quote {
    font-family: "Newsreader", Georgia, serif;
    font-weight: 400;
  }
  h1 {
    margin: 0;
    font-size: 2.375rem;
    line-height: 1.05;
    letter-spacing: -0.01em;
  }
  h2 { margin: 0; font-size: 1.5rem; }
  .lede {
    margin: 0;
    font-family: "Newsreader", Georgia, serif;
    font-style: italic;
    font-size: 1.375rem;
    line-height: 1.3;
  }
  .copy {
    margin: 0;
    font-size: 0.96875rem;
    line-height: 1.55;
    color: var(--body);
  }
  .stack { display: flex; flex-direction: column; gap: 8px; }
  .window {
    display: block;
    width: 100%;
    height: auto;
  }
  /*
   * A tampa da caixa, como a folha de rosto de um livro: tudo centrado, o lugar em versaletes
   * espaçadas, a cidade em itálico, o postal com o selo, a mesa entre dois traços, o apelido
   * grande e leve (Newsreader no tamanho ótico de título) e a descrição em itálico.
   */
  .reader-card.reader-lid {
    align-items: center;
    gap: 0;
    padding: 22px 20px 14px;
    text-align: center;
    background-color: var(--capa, var(--tape));
    background-image: repeating-linear-gradient(176deg, rgba(122, 75, 46, 0) 0 9px, rgba(122, 75, 46, 0.07) 9px 10px);
    box-shadow: inset 0 0 0 1px rgba(122, 75, 46, 0.18), inset 14px 0 18px -14px rgba(42, 28, 19, 0.22), 0 10px 18px -12px rgba(42, 28, 19, 0.4);
  }
  .reader-lid.reader-card::before { display: none; }
  .lid-head { display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .lid-place { display: flex; align-items: center; gap: 12px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.3em; color: var(--ink); }
  .lid-place::before, .lid-place::after { content: ""; width: 20px; height: 1.5px; background: currentColor; }
  .lid-logo { width: 28px; height: 28px; margin-bottom: 4px; border-radius: 50%; object-fit: cover; }
  .lid-city { font-family: "Newsreader", Georgia, serif; font-style: italic; font-size: 0.9375rem; color: var(--muted); }
  .lid-postcard {
    position: relative;
    flex: none;
    width: min(72%, 15rem);
    margin: 18px auto 0;
    padding: 7px 7px 9px;
    background-color: var(--surface);
    background-image: var(--grain);
    box-shadow: 0 1px 2px rgba(42, 28, 19, 0.2);
    transform: rotate(-1.5deg);
  }
  .lid-postcard .window { max-height: 7.5rem; }
  .lid-postcard.has-photo { transform: rotate(var(--photo-angle, -2deg)); }
  /* O postal é o mesmo do editor: foto grande, moldura de papel com a margem funda em baixo. */
  .lid-postcard.has-photo { width: calc(100% - 8px); max-width: 21rem; min-width: 8.5rem; padding: 16px 16px 66px; background-color: #FFFEFB; box-shadow: 0 1px 2px rgba(42, 28, 19, 0.2), 0 14px 22px -12px rgba(42, 28, 19, 0.5); }
  /* A fita que a segura à capa. */
  .lid-postcard.has-photo::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: -11px;
    left: calc(50% - 40px);
    width: 80px;
    height: 22px;
    background: rgba(227, 209, 180, 0.9);
    box-shadow: 0 0 0 1px rgba(122, 75, 46, 0.08);
    transform: rotate(-3deg);
  }
  .lid-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    font-family: "Caveat", "Newsreader", cursive;
    font-weight: 600;
    font-size: 2.625rem;
    line-height: 1;
    color: #23305C;
  }
  .lid-postcard.has-photo .arrival-photo {
    width: 100%;
    max-width: 100%;
    min-height: 5.5rem;
    max-height: min(318px, 38svh);
    height: auto;
    margin-inline: auto;
    display: block;
    background-color: var(--featured);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  .lid-text { display: flex; flex-direction: column; align-items: center; margin-block: 0; padding: 0 6px; }
  /* Com a foto, o nome da mesa está escrito na polaroid; o título fica sozinho. */
  .reader-lid:has(.lid-postcard.has-photo) .lid-mesa { display: none; }
  .lid-mesa {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    color: var(--stamp);
  }
  .lid-mesa::before, .lid-mesa::after { content: ""; width: 22px; height: 1px; background: currentColor; }
  .lid-title {
    margin: 26px 0 0;
    font-weight: 300;
    font-size: clamp(2rem, 12.3vw, 2.875rem);
    line-height: 0.98;
    letter-spacing: -0.03em;
    font-variation-settings: "opsz" 72;
    text-wrap: balance;
  }
  .lid-text .place-description {
    max-width: 16rem;
    margin-top: 16px;
    font: italic 1.03125rem/1.45 "Newsreader", Georgia, serif;
    color: var(--body);
  }
  .lid-title em { font-style: italic; font-weight: 400; color: var(--stamp); }
  .lid-ornament { display: none; margin-top: 18px; font-size: 0.875rem; line-height: 1; color: var(--illus); }
  .lid-count {
    margin: 10px 0 0;
    font-family: "Newsreader", Georgia, serif;
    font-style: italic;
    font-size: 1rem;
    font-variant-numeric: oldstyle-nums;
    color: var(--body);
  }
  .lid-hint {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    align-self: center;
    margin: auto 0 0;
    padding: 11px 20px 11px 17px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--surface);
    font-size: 0.9375rem;
    font-weight: 600;
  }
  /* A dica do gesto só faz sentido com o baralho a funcionar. */
  .reader.is-ready .lid-hint { display: flex; }
  .lid-foot { align-self: stretch; display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 8px; }
  .lid-foot .care-line { font-size: 0.6875rem; }
  .lid-foot .footer { padding-top: 0; }
  /* Em ecrãs mais baixos, a capa aperta-se para caber inteira, sem rolar. */
  @media (max-height: 760px) {
    .reader-card.reader-lid { padding-top: 16px; }
    .lid-postcard { width: min(60%, 12.5rem); margin-top: 12px; }
    .lid-postcard .window { max-height: 5rem; }
    .lid-postcard.has-photo { width: min(80%, 16rem); max-width: min(80%, 16rem); }
    .lid-postcard.has-photo .arrival-photo { max-height: min(220px, 30svh); }
    .lid-title { margin-top: 10px; font-size: 2.25rem; }
    .lid-text .place-description { margin-top: 10px; font-size: 0.9375rem; }
    .lid-ornament { display: none; }
    .lid-hint { margin-top: 10px; padding-top: 8px; }
    .end-text { padding-top: 8px; }
    .reader-end-title { font-size: 2.125rem; }
    .end-copy { margin-top: 10px; font-size: 0.9375rem; }
    .reader-end .lid-ornament, .end-box { display: none; }
    .reader { padding-top: 10px; }
  }
  .care-line { margin: 0; text-align: center; }
  /* O selo do postal, com o número da mesa e o picotado à volta. */
  .postage {
    position: absolute;
    right: 14px;
    bottom: -14px;
    width: 54px;
    height: 64px;
    padding: 5px;
    background-color: var(--stamp);
    background-image: radial-gradient(circle at 3px 3px, var(--ground) 2.2px, transparent 2.6px);
    background-size: 7px 7px;
    transform: rotate(6deg);
    box-shadow: 0 4px 8px -4px rgba(42, 28, 19, 0.5);
  }
  .postage > span {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    background: var(--stamp);
    border: 1px solid rgba(255, 252, 247, 0.6);
    color: var(--surface);
    font-family: "Newsreader", Georgia, serif;
    font-size: 1.375rem;
    line-height: 1;
  }
  /* O carimbo dos bilhetes: a mesa, o dia e a hora, em tinta terracota, um pouco torto. */
  .postmark {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 1;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, var(--stamp) 62%, transparent);
    color: color-mix(in srgb, var(--stamp) 80%, transparent);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: "Instrument Sans", system-ui, sans-serif;
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1.3;
    text-align: center;
    transform: rotate(12deg);
    pointer-events: none;
  }
  .eyebrow.is-ink { color: var(--stamp); }
  .place-description { margin: 0; font-size: 0.96875rem; line-height: 1.55; color: var(--body); }
  /*
   * Ao chegar, o vapor sobe duas vezes e a luz respira uma: tudo acaba antes de 5 s e volta ao
   * sítio, visível (WCAG 2.2.2). Com movimento reduzido, nada se mexe.
   */
  .lid-postcard .steam {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: cp-steam 1.8s ease-in-out 300ms 2 both;
  }
  .lid-postcard .steam-late { animation-delay: 1.3s; }
  .lid-postcard .glow {
    transform-box: fill-box;
    transform-origin: center;
    animation: cp-glow 4.2s ease-in-out 200ms 1 both;
  }
  @keyframes cp-steam {
    0%, 100% { transform: none; opacity: 0.65; }
    45% { transform: translateY(-7px) scaleY(1.06); opacity: 0.15; }
    55% { transform: translateY(5px) scaleY(0.9); opacity: 0; }
  }
  @keyframes cp-glow {
    0%, 100% { transform: none; opacity: 1; }
    50% { transform: scale(1.14); opacity: 0.85; }
  }
  .eyebrow-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
  .moment {
    font-family: "Newsreader", Georgia, serif;
    font-style: italic;
    font-size: 0.875rem;
    color: var(--muted);
  }
  .actions { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
  .primary, .secondary {
    padding: 12px 24px;
    text-align: center;
    min-height: 54px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
  }
  .primary { background: var(--stamp); color: var(--on-action); }
  .secondary {
    min-height: 52px;
    border: 1.5px solid var(--ink);
    color: var(--ink);
    font-weight: 500;
  }
  .fine {
    margin: 6px 0 0;
    font-size: 0.78125rem;
    line-height: 1.5;
    color: var(--muted);
    text-align: center;
  }
  .curation {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--curation);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
  }
  .card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: inherit;
    text-decoration: none;
    padding: 20px 20px 16px;
    background: var(--surface);
    box-shadow: 0 1px 0 var(--line), 0 12px 22px -16px rgba(42, 28, 19, 0.45);
  }
  .card p, .story > p {
    margin: 0;
    font-family: "Newsreader", Georgia, serif;
    line-height: 1.4;
  }
  .card p { font-size: 1.1875rem; }
  .card > .photo { box-shadow: 0 1px 2px rgba(42, 28, 19, 0.14); }
  .card.is-team { background: var(--featured); }
  .stamp {
    align-self: flex-start;
    padding: 4px 8px;
    border: 1.5px solid var(--curation);
    border-radius: 4px;
    color: var(--curation);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transform: rotate(-2deg);
  }
  .byline-end { display: inline-flex; align-items: center; gap: 2px; }
  /* A denúncia é um sinal na margem: pequeno à vista, 44 px ao toque. */
  .report-link {
    flex: none;
    width: 44px;
    height: 44px;
    margin: -12px -12px -12px 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    border-radius: 999px;
  }
  .report-link:hover { color: var(--ink); }
  .topbar .report-link { margin: 0 -12px 0 0; }
  /*
   * Menu do cartão do visitante («⋯» → Pedir cuidado): ícone quieto no canto,
   * 44 px ao toque, sem pill nem badge. Só no baralho (folhear); a fila de
   * moderação não o leva. Sem partilhar no cartão.
   */
  .memory-actions {
    position: absolute;
    right: 8px;
    bottom: 6px;
    z-index: 3;
  }
  .memory-actions > summary {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    border-radius: 999px;
    list-style: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .memory-actions > summary::-webkit-details-marker { display: none; }
  .memory-actions > summary:hover,
  .memory-actions[open] > summary { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
  .memory-actions > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .memory-actions-icon { display: inline-flex; flex: none; }
  .memory-actions-list {
    position: absolute;
    right: 0;
    bottom: calc(100% + 4px);
    width: max-content;
    max-width: min(16rem, calc(100vw - 48px));
    padding: 6px;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    color: var(--ink);
    border-radius: 12px;
    box-shadow: 0 14px 32px rgba(42, 28, 19, 0.22);
  }
  .memory-action {
    min-height: 48px;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }
  .memory-action + .memory-action { border-top: 1px solid var(--line); }
  .memory-action:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
  .memory-action:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
  .memory-action-text { display: flex; flex-direction: column; gap: 2px; }
  .memory-action-text small { font-size: 0.8125rem; font-weight: 400; color: var(--muted); }
  .reader-card.reader-lid .memory-actions,
  .reader-card.reader-end .memory-actions,
  .stack-note .memory-actions,
  .tema-livro .memory-actions { display: none; }
  .byline {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: 0.8125rem;
    color: var(--muted);
  }
  .end {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    font-family: "Newsreader", Georgia, serif;
    font-style: italic;
    font-size: 1.125rem;
    line-height: 1.4;
    color: var(--body);
  }
  .back {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--ink);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
  }
  .story {
    background: var(--surface);
    padding: 32px 26px 26px;
    box-shadow: 0 1px 0 var(--line), 0 20px 36px -24px rgba(42, 28, 19, 0.45);
    display: flex;
    flex-direction: column;
    gap: 22px;
  }
  .story > .story-text { font-size: 1.625rem; line-height: 1.38; }
  .reply-button { align-self: flex-start; min-height: 44px; padding: 8px 24px; }
  .replies { display: flex; flex-direction: column; gap: 12px; }
  .replies-title { font-size: 1.375rem; padding-top: 18px; border-top: 1px solid var(--line); }
  .replies > .thread { margin: 0; padding: 0; border: 0; }
  .story .who {
    margin: 0;
    font-family: "Newsreader", Georgia, serif;
    font-style: italic;
    font-size: 1.0625rem;
    color: var(--body);
  }
  .unavailable {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    padding: 24px 8px 48px;
  }
  .unavailable .secondary { align-self: flex-start; }
  .unavailable h1 { font-size: 1.875rem; line-height: 1.15; }
  .footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-top: 8px;
    color: var(--muted);
    font-family: Outfit, "Instrument Sans", system-ui, sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
  }
  .footer svg { display: block; }
  .fine a {
    color: var(--ink);
    display: inline-block;
    padding: 13px 4px;
    margin: -13px -4px;
  }
  .leave-title { font-size: 1.9375rem; line-height: 1.1; }
  .leave-form, .sent { display: flex; flex-direction: column; gap: 16px; }
  .field { display: flex; flex-direction: column; gap: 8px; font-size: 0.96875rem; }
  textarea, .field input[type="text"], .field input:not([type="radio"]):not([type="file"]):not([type="range"]) {
    width: 100%;
    border: 1.5px solid var(--control);
    border-radius: 4px;
    background: var(--surface);
    color: var(--ink);
    font: 1.1875rem/1.42 "Newsreader", Georgia, serif;
    padding: 12px;
  }
  .field input[type="range"] {
    width: 100%;
    accent-color: var(--ink);
    min-height: 44px;
  }
  .field input:not([type="radio"]):not([type="file"]) {
    font-family: "Instrument Sans", system-ui, sans-serif;
    font-size: 1rem;
    min-height: 46px;
    border-radius: 10px;
    background: var(--white);
  }
  /* O código do sign-in: uma caixa por dígito, desenho sobre um único input real transparente. */
  .otp-who { display: flex; flex-direction: column; gap: 2px; margin: 0; }
  /* O e-mail numa linha e «Usar outro e-mail» na de baixo, sempre. */
  .otp-who-line { display: flex; flex-direction: column; align-items: flex-start; gap: 0; color: var(--ink); }
  .otp-who-line strong { overflow-wrap: anywhere; }
  .otp { position: relative; }
  /*
   * As caixas enchem a largura da coluna, como o botão de baixo: uma grelha de colunas iguais e
   * um só espaço entre todas. Sem pausa no meio, que fazia as duas metades parecerem desiguais.
   */
  .otp-row { display: grid; grid-template-columns: repeat(var(--otp-length, 6), minmax(0, 1fr)); gap: 10px; }
  .otp-box {
    min-width: 0;
    height: 68px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--control);
    border-radius: 12px;
    background: var(--white);
    color: var(--ink);
    font: 500 2rem/1 "Newsreader", Georgia, serif;
    font-variant-numeric: lining-nums tabular-nums;
  }
  .otp.is-focus .otp-box.is-active {
    border-color: var(--ink);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--stamp) 28%, transparent);
  }
  .otp.is-focus .otp-box.is-active:not(.is-filled)::after {
    content: "";
    width: 2px;
    height: 1.875rem;
    background: var(--ink);
    animation: otp-caret 1.05s steps(1) infinite;
  }
  @keyframes otp-caret { 50%, 100% { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .otp.is-focus .otp-box.is-active:not(.is-filled)::after { animation: none; } }
  .otp.is-error .otp-box,
  .otp.is-error.is-focus .otp-box.is-active { border-color: var(--error-border); background: var(--error-bg); }
  .otp-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    font-size: 16px;
    cursor: text;
  }
  .otp-status { margin: 0; min-height: 44px; font-size: 0.9375rem; line-height: 1.45; color: var(--muted); }
  .otp-status.is-error { color: var(--error-ink); font-weight: 500; }
  .otp-links { margin: 0; display: flex; justify-content: center; }
  /* As linhas do bilhete crescem com a letra e ficam logo abaixo da base do texto. */
  textarea {
    --rule: 1.6875rem;
    line-height: var(--rule);
    padding-top: 0.8125rem;
    background-image: linear-gradient(to bottom, transparent calc(100% - 1px), var(--line) calc(100% - 1px));
    background-size: 100% var(--rule);
    background-position: 0 calc(0.8125rem - 0.18 * var(--rule));
    background-attachment: local;
    background-clip: content-box;
  }
  /* Deixar e Responder: escreve-se numa folha de papel, não numa caixa de formulário. */
  .sheet {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 16px 10px;
    background: var(--surface);
    border: 1.5px solid var(--control);
    border-radius: 4px;
    box-shadow: 0 12px 22px -16px rgba(42, 28, 19, 0.45);
  }
  .sheet .field { gap: 2px; }
  .sheet-label {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .sheet textarea {
    border: 0;
    border-radius: 0;
    background-color: transparent;
    padding-left: 0;
    padding-right: 0;
    resize: vertical;
  }
  /* O foco fica na folha. Um contorno à volta das linhas faz uma segunda caixa. */
  .sheet textarea:focus,
  .sheet textarea:focus-visible {
    outline: none;
  }
  .sheet:has(textarea:focus-visible) {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
  }
  .sheet .counter { margin: 0; }
  /*
   * Deixar: escreve-se numa ficha da caixa, igual às que se folheiam. Fita no topo, o carimbo à
   * espera do dia e da hora, o texto em letra grande, a assinatura e a foto presa no papel.
   */
  .leave-screen { padding-bottom: 0; gap: 16px; }
  .leave-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 25rem;
    padding: 30px 22px 14px;
    background-color: var(--surface);
    background-image: var(--grain);
    box-shadow: 0 1px 0 var(--line), 0 18px 30px -18px rgba(42, 28, 19, 0.5);
  }
  .leave-card::before {
    content: "";
    position: absolute;
    top: -10px;
    left: calc(50% - 36px);
    width: 72px;
    height: 20px;
    background: rgba(227, 209, 180, 0.92);
    transform: rotate(-3deg);
  }
  .postmark.is-preview { top: 16px; right: 16px; border-style: dashed; opacity: 0.7; }
  .leave-card textarea.leave-text {
    flex: 1;
    min-height: 6rem;
    margin-top: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    resize: none;
    font: 1.625rem/1.3 "Newsreader", Georgia, serif;
    color: var(--ink);
  }
  .leave-form[data-has-photo] .leave-card textarea.leave-text { font-size: 1.25rem; min-height: 4rem; }
  .leave-text::placeholder, .leave-signature input::placeholder { color: #8A7464; opacity: 1; }
  /* O foco fica na ficha: um contorno à volta da caixa de texto faria uma segunda caixa. */
  .leave-card textarea.leave-text:focus-visible, .leave-signature input:focus-visible { outline: none; }
  .leave-signature:focus-within { border-color: var(--stamp); box-shadow: 0 0 0 1px var(--stamp); }
  /* A assinatura é um campo à vista, com nome: uma linha tracejada passava despercebida. */
  .leave-signature-label, .leave-sign label {
    margin-top: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--body);
  }
  .leave-signature {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 48px;
    box-sizing: border-box;
    padding: 0 14px;
    border: 1.5px solid var(--ink);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.7);
    font: italic 1.0625rem/1.3 "Newsreader", Georgia, serif;
    color: var(--body);
  }
  .leave-signature input:not([type="file"]) {
    flex: 1;
    min-width: 0;
    min-height: 40px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font: italic 1.0625rem/1.3 "Newsreader", Georgia, serif;
    color: var(--body);
  }
  .leave-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 10px;
    font-size: 0.875rem;
  }
  .leave-foot-note { color: var(--muted); }
  /*
   * Post-its: a cor que o visitante escolhe ao deixar a memória. Um pensamento novo nasce em papel,
   * a mesma cor das antigas e das respostas. Todas claras, para a tinta escura ler bem em cima.
   */
  :root { --note-amarelo: #F6E7A6; --note-rosa: #F3D9CE; --note-verde: #E4EAD0; --note-papel: var(--surface); }
  [data-cor="amarelo"] { --note: var(--note-amarelo); }
  [data-cor="rosa"] { --note: var(--note-rosa); }
  [data-cor="verde"] { --note: var(--note-verde); }
  [data-cor="papel"] { --note: var(--note-papel); }
  /* No Deixar, o post-it nasce em papel e muda de cor com a escolha, sem script; sem fita, cola-se pela faixa de cima. */
  .leave-form:has(.note-colors) .leave-card {
    background-color: var(--note-papel);
    background-image: linear-gradient(180deg, rgba(122, 75, 46, 0.09), rgba(122, 75, 46, 0) 26px), var(--grain);
    transition: background-color 200ms ease-out;
  }
  .leave-form:has(.note-colors) .leave-card::before { display: none; }
  .leave-form:has(input[name="cor"][value="amarelo"]:checked) .leave-card { background-color: var(--note-amarelo); }
  .leave-form:has(input[name="cor"][value="rosa"]:checked) .leave-card { background-color: var(--note-rosa); }
  .leave-form:has(input[name="cor"][value="verde"]:checked) .leave-card { background-color: var(--note-verde); }
  .leave-form:has(input[name="cor"][value="papel"]:checked) .leave-card { background-color: var(--note-papel); }
  .note-colors { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .note-colors legend { padding: 0 0 8px; font-size: 0.8125rem; color: var(--body); text-align: center; }
  .note-swatches { display: flex; justify-content: center; gap: 10px; }
  .note-swatch { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 52px; min-height: 44px; cursor: pointer; }
  .note-swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
  .note-chip {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--note);
    box-shadow: 0 0 0 1px rgba(42, 28, 19, 0.28);
    transition: transform 150ms ease-out, box-shadow 150ms ease-out;
  }
  .note-name { font-size: 0.75rem; color: var(--muted); }
  .note-swatch input:checked + .note-chip { box-shadow: 0 0 0 1px rgba(42, 28, 19, 0.28), 0 0 0 3px var(--ground), 0 0 0 5px var(--ink); transform: rotate(-6deg); }
  .note-swatch input:checked ~ .note-name { color: var(--ink); font-weight: 600; }
  .note-swatch input:focus-visible + .note-chip { outline: 2px solid var(--stamp); outline-offset: 6px; }
  .leave-card-foot .text-button { align-self: center; min-height: 36px; font-size: 0.875rem; }
  .photo-button.photo-chip {
    position: relative;
    min-height: 36px;
    padding: 0 12px;
    gap: 6px;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 500;
  }
  /*
   * A foto da memória: o recorte direito, na proporção da foto. Arrastar e aproximar escolhem o que
   * fica; rodar pousa a impressão, com a borda, na nota. Os controlos ficam por cima e esbatem-se
   * enquanto se arrasta. Paisagem e quadrado ocupam a largura; mais alto que 4:5 estreita.
   */
  .leave-form.is-enhanced .leave-card > .postmark.is-preview { display: none; }
  .leave-shot { display: flex; flex-direction: column; gap: 8px; }
  .leave-shot-empty {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 9.5rem;
    padding: 16px;
    border: 2px dashed color-mix(in srgb, var(--stamp) 65%, transparent);
    background: rgba(255, 252, 247, 0.55);
    text-align: center;
    color: var(--stamp);
  }
  .leave-shot-empty strong { color: var(--ink); font-size: 1rem; }
  .leave-shot-copy { max-width: 16rem; font-size: 0.8125rem; line-height: 1.4; color: var(--body); }
  .leave-shot-picks { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 4px; }
  .leave-shot-pick {
    position: relative;
    min-height: 44px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    border: 1px solid color-mix(in srgb, var(--stamp) 65%, transparent);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
  }
  .leave-shot-pick:first-child { background: var(--stamp); border-color: var(--stamp); color: var(--on-action); }
  .leave-form.is-enhanced .leave-shot-pick input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
  .leave-shot-pick:has(input:focus-visible) { outline: 2px solid var(--stamp); outline-offset: 3px; }
  .leave-shot-frame {
    position: relative;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    overflow: visible;
    background: transparent;
  }
  .leave-shot-print {
    position: absolute;
    left: 50%;
    top: 50%;
    box-sizing: content-box;
    padding: 8px 8px 26px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 3px rgba(42, 28, 19, 0.22);
    transform: translate(-50%, -50%) rotate(var(--photo-angle, 0deg));
  }
  .leave-shot-print canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; background: #fff; }
  .leave-shot-frame canvas { display: block; touch-action: none; cursor: grab; }
  .leave-shot-frame canvas:active { cursor: grabbing; }
  .leave-shot-frame canvas:focus-visible { outline: 2px solid var(--stamp); outline-offset: -2px; }
  .leave-shot-hint {
    z-index: 2;
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(42, 28, 19, 0.72);
    color: #F5EFE4;
    font-size: 0.71875rem;
    pointer-events: none;
    transition: opacity 150ms ease-out;
  }
  .leave-form:not([data-has-photo]) .leave-shot-hint, .leave-form.is-rotating .leave-shot-hint { display: none; }
  /* Com foto, a barra fica à mão e o texto também: não há "Pronto" para passar de um ao outro. */
  .leave-shot-controls { display: none; flex-direction: column; align-items: center; gap: 10px; }
  .leave-form[data-has-photo] .leave-shot-controls { display: flex; animation: leave-tools-in 200ms ease-out; }
  /* A pega do canto: diz, sem palavras, que a foto roda. */
  .leave-shot-rotate {
    z-index: 3;
    position: absolute;
    top: -14px;
    right: -14px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    background: var(--stamp);
    color: #FFFFFF;
    box-shadow: 0 3px 8px rgba(42, 28, 19, 0.35);
    touch-action: none;
    cursor: grab;
    transition: box-shadow 150ms ease-out;
  }
  .leave-shot-rotate:active { cursor: grabbing; }
  .leave-shot-rotate:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
  .leave-form.is-rotating .leave-shot-rotate { box-shadow: 0 0 0 8px color-mix(in srgb, var(--stamp) 22%, transparent), 0 3px 8px rgba(42, 28, 19, 0.35); }
  /* Enquanto roda: o ângulo por cima e a linha do horizonte por trás. */
  .leave-shot-angle {
    z-index: 3;
    position: absolute;
    top: 8px;
    left: 50%;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(42, 28, 19, 0.85);
    color: #F5EFE4;
    font-size: 0.875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-50%);
    transition: opacity 150ms ease-out;
  }
  .leave-form.is-rotating .leave-shot-angle { opacity: 1; }
  .leave-shot-frame::before {
    content: "";
    position: absolute;
    left: -12px;
    right: -12px;
    top: 50%;
    border-top: 1.5px dashed color-mix(in srgb, var(--stamp) 55%, transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease-out;
  }
  .leave-form.is-rotating .leave-shot-frame::before { opacity: 1; }
  /* A dica da primeira foto: dois dedos a girar, uma vez só. */
  .leave-shot-coach {
    z-index: 4;
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    background: rgba(42, 28, 19, 0.72);
    color: #F5EFE4;
    text-align: center;
  }
  .leave-shot-coach[hidden] { display: none; }
  .leave-shot-coach p { max-width: 16rem; margin: 0; font-size: 0.875rem; line-height: 1.4; }
  .leave-shot-coach button {
    min-height: 44px;
    padding: 0 22px;
    border: 1.5px solid #F5EFE4;
    border-radius: 999px;
    background: transparent;
    color: #F5EFE4;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
  }
  @media (prefers-reduced-motion: no-preference) {
    .leave-shot-coach svg { animation: leave-coach-turn 1.6s ease-in-out infinite alternate; }
  }
  @keyframes leave-coach-turn { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
  @keyframes leave-tools-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) {
    .leave-form.is-adjusting .leave-shot-controls, .leave-undo:not([hidden]) { animation: none; }
  }
  .leave-shot-tools {
    display: flex;
    align-items: center;
    padding: 4px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--on-action);
    box-shadow: 0 6px 16px -6px rgba(42, 28, 19, 0.5);
  }
  .leave-shot-tools button {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }
  .leave-shot-tools button:hover { background: rgba(245, 239, 228, 0.14); }
  .leave-shot-tools button:focus-visible, .leave-shot-done:focus-visible { outline: 2px solid var(--on-action); outline-offset: -4px; }
  .leave-shot-sep { width: 1px; height: 24px; margin: 0 4px; background: rgba(245, 239, 228, 0.3); }
  .leave-shot-done {
    min-height: 44px;
    padding: 0 28px;
    border: 0;
    border-radius: 999px;
    background: var(--ink);
    color: var(--on-action);
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
  }
  /* O lembrete de assinatura: uma folha que sobe de baixo. */
  .leave-sign {
    position: fixed;
    inset: auto 0 0 0;
    width: 100%;
    max-width: 32rem;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 22px 20px 24px;
    border: 0;
    border-radius: 20px 20px 0 0;
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 -10px 30px rgba(42, 28, 19, 0.25);
  }
  .leave-sign[open] { display: flex; flex-direction: column; gap: 10px; }
  .leave-sign::backdrop { background: rgba(42, 28, 19, 0.45); }
  .leave-sign h2 { margin: 0; font: 400 1.625rem/1.2 "Newsreader", Georgia, serif; }
  .leave-sign p { margin: 0 0 4px; font-size: 0.9375rem; line-height: 1.45; color: var(--body); }
  .leave-sign .primary { margin-top: 8px; }
  .leave-sign-skip { min-height: 44px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 0.9375rem; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  .leave-cam {
    width: min(28rem, calc(100% - 32px));
    padding: 12px;
    border: 0;
    border-radius: 14px;
    background: var(--surface);
    color: var(--ink);
  }
  .leave-cam::backdrop { background: rgba(42, 28, 19, 0.6); }
  .leave-cam video { display: block; width: 100%; max-height: 60vh; background: #000; border-radius: 6px; object-fit: contain; }
  .leave-cam-bar { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
  .leave-cam-cancel { min-height: 44px; padding: 0 16px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 0.9375rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  .leave-undo {
    z-index: 6;
    position: fixed;
    left: 20px;
    right: 20px;
    bottom: calc(var(--sticky-cta) + 12px);
    max-width: 24rem;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 4px 6px 4px 18px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--on-action);
    font-size: 0.9375rem;
    box-shadow: 0 8px 20px -8px rgba(42, 28, 19, 0.55);
    animation: leave-tools-in 200ms ease-out;
  }
  .leave-undo button {
    min-height: 44px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }
  .leave-undo button:focus-visible { outline: 2px solid var(--on-action); outline-offset: 2px; }
  .leave-shot-error { margin: 0; font-size: 0.875rem; color: var(--stamp); }
  .leave-bar { margin-top: 4px; }
  .leave-bar .primary { width: 100%; }
  .leave-screen > .reply-parent { margin-top: 4px; }
  .reply-context { display: flex; flex-direction: column; gap: 18px; }
  .reply-title { font-size: 1.625rem; line-height: 1.15; }
  .reply-parent {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 6px 4px 0;
    padding: 22px 20px 16px;
    background: var(--surface);
    box-shadow: 0 1px 0 var(--line), 0 12px 22px -16px rgba(42, 28, 19, 0.45);
    transform: rotate(-0.6deg);
  }
  .reply-parent::before {
    content: "";
    position: absolute;
    top: -9px;
    left: 24%;
    width: 64px;
    height: 18px;
    background: rgba(227, 209, 180, 0.82);
    box-shadow: 0 1px 0 rgba(42, 28, 19, 0.08);
    transform: rotate(-4deg);
  }
  .reply-parent p {
    margin: 0;
    font-family: "Newsreader", Georgia, serif;
    font-size: 1.25rem;
    line-height: 1.4;
  }
  .reply-parent .photo { box-shadow: 0 1px 2px rgba(42, 28, 19, 0.14); }
  .reply-sheet { margin-left: 22px; }
  .reply-sheet::before {
    content: "";
    position: absolute;
    left: -21px;
    top: -30px;
    width: 16px;
    height: 46px;
    border-left: 1.5px solid var(--illus);
    border-bottom: 1.5px solid var(--illus);
    border-bottom-left-radius: 10px;
  }
  .photo-button { gap: 10px; color: var(--ink); }
  .photo-button .optional { color: var(--muted); }
  .photo-actions { display: flex; flex-wrap: wrap; gap: 4px 24px; }
  .text-button.quiet { color: var(--muted); }
  .withdrawn-line {
    margin: 0;
    color: var(--muted);
    font-family: "Newsreader", Georgia, serif;
    font-style: italic;
    font-size: 1rem;
    line-height: 1.4;
  }
  .cord-item > .withdrawn-line { margin-bottom: 8px; }
  .signature-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
    border-bottom: 1.5px solid var(--control);
    font-family: "Newsreader", Georgia, serif;
    font-style: italic;
    font-size: 1.25rem;
    color: var(--body);
  }
  .field.signature-field .signature-line input:not([type="radio"]):not([type="file"]):not([type="range"]) {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    padding: 8px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font: italic 1.25rem/1.3 "Newsreader", Georgia, serif;
  }
  .care-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 4px 0;
    color: var(--body);
    font-size: 0.8125rem;
    line-height: 1.45;
  }
  .care-note svg { flex: none; margin-top: 1px; color: var(--curation); }
  .photo-button svg, .care-note svg { width: 1.25em; height: 1.25em; flex: none; }
  .care-note a { color: var(--ink); }
  .counter { margin: -8px 0 0; text-align: right; color: var(--muted); font-size: 0.8125rem; }
  .photo-picker, .signature {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .arrival-photo {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    background: var(--featured);
  }
  .caption-grid { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .caption-grid legend { padding: 0 0 6px; font-size: 0.8125rem; font-weight: 600; }
  .caption-grid { flex-direction: column; }
  .caption-grid input[type="text"] { min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font: italic 1rem "Newsreader", Georgia, serif; color: var(--ink); }
  .text-button {
    align-self: flex-start;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: 500 0.9375rem/1 "Instrument Sans", system-ui, sans-serif;
    text-decoration: underline;
  }
  .photo-button {
    min-height: 56px;
    border: 1.5px dashed var(--illus);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px;
  }
  .photo-button input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .photo-preview {
    display: block;
    width: 88%;
    height: auto;
    margin: 6px auto 4px;
    object-fit: contain;
    background: var(--white);
    padding: 8px 8px 26px;
    box-shadow: 0 1px 2px rgba(42, 28, 19, 0.14), 0 12px 22px -16px rgba(42, 28, 19, 0.45);
    transform: rotate(0.8deg);
  }
  @media (prefers-reduced-motion: reduce) { .photo-preview { transform: none; } }
  .consent {
    margin: 0;
    background: var(--featured);
    color: var(--consent-ink);
    padding: 12px;
    font-size: 0.8125rem;
    line-height: 1.45;
  }
  .choice {
    display: flex;
    gap: 10px;
    align-items: center;
    min-height: 44px;
    padding: 10px 12px;
    border: 1.5px solid var(--handle);
    background: transparent;
  }
  .choice:has(:checked), .choice.is-selected { border-color: var(--ink); background: var(--surface); }
  .choice strong, .choice small { display: block; }
  .choice small { color: var(--body); font-weight: 400; }
  button.primary, button.secondary {
    width: 100%;
    border: 0;
    font-family: "Instrument Sans", system-ui, sans-serif;
    cursor: pointer;
  }
  button.secondary { background: transparent; border: 1.5px solid var(--ink); }
  button.primary:disabled {
    background: var(--disabled);
    color: var(--on-disabled);
    cursor: not-allowed;
  }
  .alert {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--error-border);
    border-radius: 10px;
    background: var(--error-bg);
    color: var(--error-ink);
  }
  .alert[hidden] { display: none; }
  .alert p { margin: 0; }
  .alert-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
  .alert-retry {
    min-height: 44px;
    padding: 0 20px;
    border: 1.5px solid var(--error-ink);
    border-radius: 999px;
    background: transparent;
    color: var(--error-ink);
    font: 500 1rem "Instrument Sans", system-ui, sans-serif;
    cursor: pointer;
  }
  .alert span {
    flex: none;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    color: var(--error-icon);
    font-weight: 700;
  }
  /* O cartão que acabou de ser deixado: o post-it na cor escolhida, como cai na caixa. */
  .sent-card {
    position: relative;
    align-self: center;
    width: min(100%, 19rem);
    box-sizing: border-box;
    margin: 18px 0 8px;
    padding: 34px 22px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    background-color: var(--note, var(--note-papel));
    background-image: var(--grain);
    box-shadow: 0 2px 3px rgba(42, 28, 19, 0.2), 0 22px 28px -14px rgba(42, 28, 19, 0.5);
    transform: rotate(-1.5deg);
  }
  .sent-card::before {
    content: "";
    position: absolute;
    top: -11px;
    left: calc(50% - 32px);
    width: 64px;
    height: 22px;
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 0 1px rgba(42, 28, 19, 0.06);
    transform: rotate(-4deg);
  }
  .sent-card-photo { display: block; width: 100%; max-height: 14rem; object-fit: contain; background: #fff; padding: 6px; box-sizing: border-box; box-shadow: 0 1px 3px rgba(42, 28, 19, 0.22); }
  .sent-card-text { margin: 0; font: 1.625rem/1.25 "Caveat", "Newsreader", cursive; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
  .sent-card-who { margin: 0; font: 1.5rem/1.1 "Caveat", "Newsreader", cursive; font-weight: 500; color: var(--ink); }
  .sent-card-when { font-size: 0.8125rem; color: var(--body); }
  .sent-status {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 14px;
    border-radius: 16px;
    background: var(--featured);
    color: var(--ink);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
  }
  .sent-screen .copy { text-align: center; }
  /*
   * A nota mede a foto. A impressão branca envolve o recorte na proporção dele.
   * Paisagem e quadrado ocupam a largura interior. Mais alto que 4:5 (altura 5/4
   * da largura) estreita, e a imagem continua inteira — sem janela nem cover.
   * O ângulo roda a impressão com a borda; a largura encolhe até essa borda caber.
   */
  .reader-card, .story, .card, .leave-card, .reply-parent, .stack-note { container-type: inline-size; }
  @property --photo-angle { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
  @property --r { syntax: "<number>"; inherits: true; initial-value: 1; }
  @property --c { syntax: "<number>"; inherits: true; initial-value: 1; }
  @property --s { syntax: "<number>"; inherits: true; initial-value: 0; }
  @property --cw0 { syntax: "<length>"; inherits: true; initial-value: 0px; }
  @property --k { syntax: "<number>"; inherits: true; initial-value: 1; }
  .photo {
    display: block;
    flex: none;
    align-self: flex-start;
    box-sizing: content-box;
    width: auto;
    height: auto;
    max-width: calc(100cqi - 16px);
    max-height: calc(100cqi * 5 / 4);
    object-fit: contain;
    background: #fff;
    padding: 8px 8px 26px;
  }
  .photo-slot {
    --c: abs(cos(var(--photo-angle)));
    --s: abs(sin(var(--photo-angle)));
    --cw0: min(100cqi - 16px, (100cqi * 5 / 4) / var(--r));
    --k: min(1, max(0px, 100cqi - 16px * var(--c) - 34px * var(--s)) / (var(--cw0) * (var(--c) + var(--r) * var(--s))));
    container-type: inline-size;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: calc((var(--k) * var(--cw0) + 16px) * var(--s) + (var(--k) * var(--cw0) * var(--r) + 34px) * var(--c));
    overflow: visible;
  }
  .photo-slot[hidden] { display: none; }
  .photo-slot > .photo {
    align-self: center;
    width: calc(var(--k) * var(--cw0));
    max-width: none;
    max-height: none;
    height: auto;
    transform: rotate(var(--photo-angle));
  }
  /* Na caixa a foto não recebe o gesto: um dedo folheia, dois dedos aproximam o cartão. Um toque não abre outro ecrã. */
  .reader .photo-slot,
  .reader .photo {
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    user-select: none;
  }
  .reader .photo { pointer-events: none; }
  /* A pinça aproxima a ficha inteira. O slide recorta o que sai; em 1× o gesto volta a folhear. */
  .reader.is-ready.is-card-zoomed .reader-stage { touch-action: none; }
  .reader.is-ready .reader-slide.is-card-zoomed { overflow: clip; }
  .reader.is-ready .reader-card.is-zoomed {
    transform-origin: center center;
    will-change: transform;
  }
  /* A fotografia aberta, no mesmo papel da caixa: letra quieta, sem véu escuro e sem botão. */
  .photo-peek {
    box-sizing: border-box;
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    background-color: var(--ground);
    background-image: var(--vignette), var(--fiber), var(--linen), var(--grain);
    color: var(--ink);
    font-family: "Instrument Sans", system-ui, sans-serif;
  }
  .photo-peek::backdrop { background: var(--ground); }
  .photo-peek-stage {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    touch-action: none;
    cursor: zoom-in;
  }
  .photo-peek-stage.is-zoomed { cursor: grab; }
  .photo-peek-img {
    display: block;
    max-width: min(100vw - 48px, 100%);
    max-height: min(100dvh - 120px, 100%);
    width: auto;
    height: auto;
    object-fit: contain;
    background: var(--white);
    padding: 8px 8px 26px;
    box-shadow: 0 1px 2px rgba(42, 28, 19, 0.14);
    transform-origin: center center;
    will-change: transform;
    user-select: none;
    -webkit-user-drag: none;
  }
  .photo-peek-hint {
    z-index: 1;
    position: absolute;
    left: 0;
    right: 0;
    bottom: max(18px, env(safe-area-inset-bottom, 0px));
    margin: 0;
    padding: 0 24px;
    text-align: center;
    font-family: "Newsreader", Georgia, serif;
    font-style: italic;
    font-size: 0.9375rem;
    letter-spacing: 0;
    color: var(--muted);
    pointer-events: none;
    transition: opacity 160ms ease;
  }
  .photo-peek-stage.is-zoomed ~ .photo-peek-hint { opacity: 0; }
  .thread {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 6px 0 0 12px;
    padding-left: 12px;
    border-left: 1.5px solid var(--line);
  }
  .thread-item { display: flex; flex-direction: column; gap: 6px; }
  .thread-card { box-shadow: none; }
  .bottom-bar {
    position: sticky;
    bottom: 0;
    z-index: 2;
    flex-shrink: 0;
    margin: 0 -24px;
    padding: 12px 24px 22px;
    background: var(--ground);
    border-top: 1px solid var(--line);
  }
  a.archive-link { flex-direction: column; gap: 0; min-height: 48px; }
  a.archive-link .fine { margin: 0; font-style: normal; }
  body:has(.archive-screen:not(.archive-empty)) { background: var(--archive-ground); }
  .archive-screen:not(.archive-empty) { --ground: var(--archive-ground); background: var(--archive-ground); }
  .archive-empty-space {
    flex: 1;
    min-height: 220px;
    display: flex;
    align-items: center;
  }
  .archive-empty-note {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px 20px;
    background: var(--surface);
    border-top: 2px solid var(--illus);
    box-shadow: 0 1px 0 var(--line), 0 12px 22px -18px rgba(42, 28, 19, 0.45);
  }
  .archive-empty-note h2 { font-size: 1.5rem; line-height: 1.16; }
  .archive-empty-note .secondary { margin-top: 4px; }
  .months {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 0 2px;
    border-bottom: 1.5px solid var(--control);
    scrollbar-width: thin;
  }
  .month-pill {
    min-height: 44px;
    padding: 0 14px;
    border-radius: 10px 10px 0 0;
    border: 1px solid var(--control);
    border-bottom: 0;
    background: var(--archive-surface);
    color: var(--ink);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    font-size: 0.875rem;
  }
  .month-pill[aria-current="page"] { background: var(--ink); color: var(--on-action); border-color: var(--ink); font-weight: 600; }
  .archive-card { background: var(--archive-surface); border-color: var(--archive-line); }
  /* Ao guardar, a ficha inteira inclina-se um pouco, como quem a pousa na caixa. */
  .leave-card { transition: transform 300ms cubic-bezier(.2, .7, .2, 1); }
  .is-sending .leave-card { transform: rotate(-0.5deg) scale(0.98); }
  @media (max-height: 520px) {
    .bottom-bar { position: static; }
  }
  /* Cuidados: quatro promessas em papel, fáceis de ler de relance. */
  .care-lede { font-size: 1.1875rem; color: var(--body); }
  .care-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
  .care-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px 18px 16px;
    background-color: var(--surface);
    box-shadow: 0 1px 0 var(--line), 0 12px 22px -16px rgba(42, 28, 19, 0.45);
  }
  .care-item:nth-child(odd) { transform: rotate(-0.4deg); }
  .care-item:nth-child(even) { transform: rotate(0.35deg); margin-left: 8px; }
  .care-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    background: var(--featured);
    color: var(--curation);
  }
  .care-icon svg { width: 1.375rem; height: 1.375rem; }
  .care-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .care-body h2 { font-size: 1.25rem; line-height: 1.2; }
  .care-body p { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--body); }
  .care-close { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
  .care-seal {
    margin: 0 0 6px;
    text-align: center;
    font-family: "Newsreader", Georgia, serif;
    font-style: italic;
    font-size: 1.125rem;
    color: var(--body);
  }
  /* Uma memória, um fio: os pensamentos ficam presos a um cordão, por ordem de chegada. */
  .memory-screen .story { position: relative; min-height: 18rem; margin-top: 8px; padding-top: 40px; transform: rotate(-0.5deg); }
  .memory-screen .story > .story-text { margin: auto 0; }
  .memory-screen .story::before {
    content: "";
    position: absolute;
    top: -9px;
    left: 38%;
    width: 70px;
    height: 18px;
    background: rgba(227, 209, 180, 0.88);
    box-shadow: 0 1px 0 rgba(42, 28, 19, 0.08);
    transform: rotate(-3deg);
  }
  .replies-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
  }
  .replies-head .replies-title { padding-top: 0; border-top: 0; }
  .replies-order {
    font-family: "Newsreader", Georgia, serif;
    font-style: italic;
    font-size: 0.9375rem;
    color: var(--muted);
  }
  .cord {
    position: relative;
    list-style: none;
    margin: 4px 0 0;
    padding: 0 0 0 26px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .cord::before {
    content: "";
    position: absolute;
    left: 8px;
    top: -6px;
    bottom: 18px;
    border-left: 2px dotted var(--illus);
  }
  .cord-item { position: relative; scroll-margin-top: 24px; }
  .cord-item::before {
    content: "";
    position: absolute;
    left: -24px;
    top: 18px;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: var(--ground);
    border: 2px solid var(--illus);
  }
  .cord-item > .card { box-shadow: 0 1px 0 var(--line), 0 10px 18px -14px rgba(42, 28, 19, 0.4); }
  .cord-item:nth-child(odd) > .card { transform: rotate(0.4deg); }
  .cord-item:nth-child(even) > .card { transform: rotate(-0.5deg); margin-right: 10px; }
  .cord-item:target > .card { outline: 2px solid var(--illus); outline-offset: 4px; }
  /* O fio acaba num lugar vazio, tracejado, que leva a responder. */
  .cord-slot {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 4.75rem;
    padding: 14px 16px;
    border: 1.5px dashed var(--illus);
    color: var(--body);
    text-decoration: none;
    font-family: "Newsreader", Georgia, serif;
    font-style: italic;
    font-size: 1.0625rem;
    line-height: 1.35;
    transform: rotate(0.4deg);
  }
  .cord-slot svg { flex: none; }
  .cord-slot:hover { background: rgba(255, 252, 247, 0.55); }
  .next-memory {
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    color: var(--ink);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
  }
  /*
   * A caixa, que é a chegada: a tampa e as memórias num baralho, um cartão por ecrã, com a
   * mesma barra de ação da memória. Sem script, é uma lista.
   */
  .reader { padding: 18px 0 0; gap: 14px; overflow-x: clip; }
  /* No baralho a moldura encolhe: o cabeçalho numa linha e a barra fina, para o livro ocupar o ecrã. */
  .reader.is-ready { padding-top: 10px; gap: 8px; }
  .reader.is-ready > .bottom-bar { padding: 8px 16px 12px; }
  .reader.is-ready .reader-controls .reader-prev, .reader.is-ready .reader-controls .reader-next { width: 44px; height: 44px; }
  .reader.is-ready .reader-controls .reader-leave { min-height: 44px; }
  .reader > .bottom-bar { margin-inline: 0; }
  .reader:not(.is-ready) .reader-track { padding: 8px 16px 0; }
  .box-empty { padding-inline: 16px; }
  .box-empty > .bottom-bar { margin-inline: -16px; }
  .reader .place-bar .back { min-width: 0; gap: 6px; }
  .back svg { flex: none; }
  .reader-pos { font-size: 0.875rem; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .reader-track { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
  .reader-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    width: 100%;
    padding: 34px 24px 18px;
    background-color: var(--surface);
    box-shadow: 0 1px 0 var(--line), 0 22px 36px -22px rgba(42, 28, 19, 0.55);
    color: inherit;
    text-decoration: none;
    -webkit-user-drag: none;
  }
  .reader-card.is-team { background-color: var(--featured); }
  .reader-card::before {
    content: "";
    position: absolute;
    top: -10px;
    left: calc(50% - 36px);
    width: 72px;
    height: 20px;
    background: rgba(227, 209, 180, 0.9);
    transform: rotate(-3deg);
  }
  .reader-card .photo { box-shadow: 0 1px 2px rgba(42, 28, 19, 0.14); }
  .reader-text { margin: 0; font-family: "Newsreader", Georgia, serif; font-size: 1.75rem; line-height: 1.32; }
  .reader-text.is-long { font-size: 1.4375rem; line-height: 1.38; }
  .reader-author { font-family: "Newsreader", Georgia, serif; font-style: italic; font-size: 1.0625rem; color: var(--muted); }
  .reader:not(.is-ready) .reader-slide[data-id] { display: flex; flex-direction: column; align-items: stretch; }
  .reader-replies { color: var(--muted); }
  .reader-text, .reader-card .withdrawn-line { display: block; }
  .reader-controls .reader-prev, .reader-controls .reader-next { display: none; }
  /*
   * A contracapa: o fundo da caixa no tamanho das outras cartas e no papel da capa, composto da
   * mesma maneira — o lugar em cima, "FIM" entre dois traços, o título grande e leve em itálico,
   * o que se leu, um ✦ e o caminho de volta à capa.
   */
  .reader-card.reader-end {
    align-items: center;
    gap: 0;
    padding: 22px 20px 14px;
    text-align: center;
    color: var(--ink);
    background-color: var(--capa, var(--tape));
    background-image: repeating-linear-gradient(176deg, rgba(122, 75, 46, 0) 0 9px, rgba(122, 75, 46, 0.07) 9px 10px);
    box-shadow: inset 0 0 0 1px rgba(122, 75, 46, 0.18), inset 14px 0 18px -14px rgba(42, 28, 19, 0.22), 0 10px 18px -12px rgba(42, 28, 19, 0.4);
  }
  .reader-end.reader-card::before { display: none; }
  .end-text { display: flex; flex-direction: column; align-items: center; margin-block: auto; padding: 16px 6px 0; }
  .end-box { margin-bottom: 22px; color: var(--muted); }
  .reader-end-title {
    margin: 14px 0 0;
    font-family: "Newsreader", Georgia, serif;
    font-style: italic;
    font-weight: 300;
    font-size: 2.5rem;
    line-height: 1.02;
    letter-spacing: -0.015em;
    font-variation-settings: "opsz" 72;
    text-wrap: balance;
  }
  .end-copy {
    max-width: 16rem;
    margin: 14px 0 0;
    font: 1.03125rem/1.45 "Newsreader", Georgia, serif;
    font-variant-numeric: oldstyle-nums;
    color: var(--body);
  }
  .end-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    align-self: stretch;
    margin-top: 16px;
    padding-top: 10px;
    border-top: 1px solid rgba(122, 75, 46, 0.25);
  }
  /* Os cuidados e o anonimato moram aqui, no fundo da caixa, numa linha por cima do caminho de volta. */
  .end-foot { flex-wrap: wrap; justify-content: space-between; }
  .end-foot .care-line { flex: 1 0 100%; margin: 0 0 6px; text-align: center; font-size: 0.75rem; }
  .reader-end-back { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--ink); font-size: 0.8125rem; font-weight: 500; }
  .end-colophon { font-size: 0.75rem; color: var(--muted); }

  /* O baralho ocupa o ecrã todo, como um livro aberto à frente: só ele e a barra de ação. */
  .reader.is-ready .reader-stage {
    position: relative;
    flex: 1;
    min-height: 26rem;
    /* O scroll vertical e o gesto de voltar do sistema ficam no navegador. Um deslize
       sobretudo horizontal é reivindicado pelo script, para um pouco de vertical não o cancelar. */
    touch-action: pan-y;
    user-select: none;
  }
  .reader.is-ready .reader-track { position: absolute; inset: 0; display: block; }
  .photo-slot img.photo:not([src]) { visibility: hidden; }
  /*
   * Um baralho de fichas. O monte fica alinhado, com 20 px livres à esquerda para o monte das
   * lidas e espaço em baixo e, em simetria com as lidas, à direita para a espessura.
   */
  .reader.is-ready .reader-slide {
    position: absolute;
    top: 0;
    left: 14px;
    right: 14px;
    bottom: 14px;
    display: flex;
    align-items: flex-start;
    visibility: hidden;
    opacity: 0;
    /* Esconde só depois de acabar o movimento, para a ficha que sai voar em vez de sumir. */
    transition: transform 340ms cubic-bezier(.2, .7, .2, 1), opacity 340ms ease-out, visibility 0s linear 340ms;
  }
  /* Fichas do mesmo tamanho: o monte é coerente, e o texto centra-se no papel. */
  .reader.is-ready .reader-card { height: 100%; max-height: 100%; overflow: auto; }
  /*
   * A ficha de uma memória nunca rola: o texto centra-se no papel e, se for longo, corta com
   * reticências; a memória inteira está a um toque, em "Abrir".
   */
  .reader.is-ready .reader-slide[data-id] .reader-card {
    overflow: hidden;
    /* A sombra da lombada, à esquerda, como numa página de livro. */
    box-shadow: 0 1px 0 var(--line), inset 14px 0 18px -14px rgba(42, 28, 19, 0.18), 0 22px 36px -22px rgba(42, 28, 19, 0.55);
  }
  .reader-page {
    font-family: "Newsreader", Georgia, serif;
    font-style: italic;
    font-size: 0.875rem;
    font-variant-numeric: oldstyle-nums;
    color: var(--muted);
  }
  .reader.is-ready .reader-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 9;
    overflow: hidden;
    margin-block: auto;
    font-size: 2.125rem;
    line-height: 1.26;
  }
  .reader.is-ready .reader-text.is-long { -webkit-line-clamp: 14; font-size: 1.375rem; line-height: 1.38; }
  /* Com foto, a impressão fica na proporção do recorte e o texto fica por baixo, sem ser engolido. */
  .reader.is-ready .reader-card:has(.photo) .reader-text {
    flex: none;
    margin-block: 0;
    font-size: 1.3125rem;
    line-height: 1.32;
    -webkit-line-clamp: 4;
  }
  /*
   * A espessura dos dois montes: bordas de papel em camadas, desenhadas pelo script, uma por
   * memória até um máximo. O monte da direita afina ao ler; o das lidas, à esquerda, engrossa.
   */
  .reader-deck, .reader-discard { display: none; }
  .reader.is-ready .reader-deck,
  .reader.is-ready .reader-discard {
    position: absolute;
    top: 0;
    left: 14px;
    right: 14px;
    display: block;
    height: calc(100% - 14px);
    pointer-events: none;
  }
  .reader.is-ready .reader-deck { z-index: 1; }
  .reader.is-ready .reader-discard { z-index: 0; transform: translateX(calc(-100% - 7px)) rotate(-0.6deg); }
  .reader.is-ready .reader-slide.is-current,
  .reader.is-ready .reader-slide.is-prev,
  .reader.is-ready .reader-slide.is-next { visibility: visible; opacity: 1; transition-delay: 0s, 0s, 0s; }
  .reader.is-ready .reader-slide.is-current { z-index: 3; }
  .reader.is-ready .reader-slide.is-current.is-card-zoomed { z-index: 6; }
  /* A seguinte está mesmo por baixo, alinhada; só se lê ao levantar a de cima. */
  .reader.is-ready .reader-slide.is-next { z-index: 2; transform: scale(0.97); }
  /*
   * A ficha lida vai para o monte das lidas, encostado à margem esquerda, por baixo de tudo:
   * só se vê a borda e nunca tapa a que se lê. A ficha em movimento (marcada pelo script até
   * assentar) fica por cima de todas e mostra o texto, nos dois sentidos, para nunca passar por
   * baixo da outra nem ficar em branco a meio do caminho. Ao pegar nela de volta, sobe por cima.
   */
  .reader.is-ready .reader-slide.is-prev,
  .reader.is-ready .reader-slide.is-past { z-index: 0; transform: translateX(calc(-100% - 7px)) rotate(-0.6deg); }
  .reader.is-ready .reader-slide.is-turning,
  .reader.is-ready.is-dragging-back .reader-slide.is-prev { z-index: 5; visibility: visible; opacity: 1; transition-delay: 0s, 0s, 0s; }
  .reader.is-ready .reader-slide.is-prev .reader-card,
  .reader.is-ready .reader-slide.is-next .reader-card { overflow: hidden; }
  /* A fita só segura a ficha de cima. */
  .reader.is-ready .reader-slide:not(.is-current) .reader-card::before { opacity: 0; }
  .reader.is-ready .reader-slide.is-next .reader-card > * { visibility: hidden; }
  .reader.is-ready:not(.is-dragging-back) .reader-slide.is-prev .reader-card > * { visibility: hidden; }
  .reader.is-ready .reader-track .reader-slide.is-turning .reader-card > *,
  .reader.is-ready .reader-slide.is-turning + .reader-slide.is-next .reader-card > * { visibility: visible; }
  /* A ficha na mão levanta-se do monte: a sombra cresce enquanto o dedo a segura. */
  .reader.is-ready .reader-slide[data-id] .reader-card { transition: box-shadow 340ms ease-out; }
  .reader.is-ready.is-dragging .reader-slide.is-current .reader-card,
  .reader.is-ready.is-dragging-back .reader-slide.is-prev .reader-card {
    box-shadow: 0 1px 0 var(--line), 0 30px 44px -22px rgba(42, 28, 19, 0.6);
  }
  .reader.is-dragging .reader-slide { transition: none !important; }
  /* Ao levantar a ficha de cima, lê-se a seguinte, que estava por baixo. */
  .reader.is-ready.is-dragging-next .reader-slide.is-next .reader-card > * { visibility: visible; }
  .reader-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .reader-controls .reader-leave { flex: 1; min-width: 0; padding: 8px 12px; font-size: 0.9375rem; text-align: center; }
  /* O fundo da caixa não tem a altura das fichas: é o que sobra quando o monte acaba. */
  .reader.is-ready .reader-controls .reader-prev, .reader.is-ready .reader-controls .reader-next { display: grid; }
  .reader-prev, .reader-next {
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    cursor: pointer;
  }
  .reader-prev { border: 1.5px solid var(--ink); background: transparent; color: var(--ink); }
  .reader-next { border: 0; background: var(--stamp); color: var(--on-action); }
  .reader-prev:disabled, .reader-next:disabled { opacity: 0.35; cursor: default; }
  @media (prefers-reduced-motion: reduce) {
    .reader.is-ready .reader-slide { transition: none !important; }
  }
  /*
   * No computador o ecrã é largo e alto: o cartão fica com uma altura de página de álbum, a
   * coluna um pouco mais larga, e o conjunto (cabeçalho, cartão e barra) centra-se na vertical,
   * com a barra logo por baixo do cartão em vez de colada ao fundo da janela.
   */
  @media (min-width: 700px) {
    .reader.is-ready { width: min(100%, 470px); justify-content: center; }
    .reader.is-ready .reader-stage { flex: none; height: min(660px, calc(100dvh - 170px)); min-height: 26rem; }
    .reader.is-ready > .bottom-bar { position: static; margin-inline: 0; background: transparent; border-top: 0; }
  }
  /*
   * As memórias são post-its: quadrados, colados no monte pela faixa de cima, sem fita, cada um
   * um pouco torto e na cor que o visitante escolheu (as antigas em papel). O texto encolhe para
   * caber; inteiro, está a um toque.
   */
  /* A ficha vai até à barra: sem faixa vazia por baixo, só a espessura do monte. */
  .reader.is-ready .reader-slide { align-items: flex-start; box-sizing: border-box; }
  .reader.is-ready .reader-slide .reader-card { height: 100%; max-height: 100%; }
  .reader.is-ready .reader-slide[data-id] .reader-card {
    gap: 10px;
    padding: 28px 24px;
    overflow: visible;
    /* Papel kraft com fibras: a cor da memória vai para o bilhete colado, não para o fundo. */
    background-color: color-mix(in srgb, var(--surface) 30%, #D6C09A);
    background-image: var(--kraft-tex);
    box-shadow: 0 1px 1px rgba(42, 28, 19, 0.08), 0 22px 20px -16px rgba(42, 28, 19, 0.5), inset 0 -10px 14px -12px rgba(42, 28, 19, 0.12);
    --tilt: -0.8deg;
    rotate: var(--tilt);
  }
  .reader.is-ready .reader-slide[data-id]:nth-child(odd) .reader-card { --tilt: 0.6deg; }
  /* O que fica fora do papel só se vê com a folha à frente. */
  .reader.is-ready .reader-slide[data-id]:is(.is-prev, .is-next) .reader-card { overflow: hidden; }
  .reader.is-ready .reader-slide[data-id] .reader-card.is-team { background-color: var(--featured); }
  .reader.is-ready .reader-slide[data-id] .reader-card::before { display: none; }
  .reader.is-ready .reader-slide[data-id] .postmark { top: 12px; right: 12px; width: 3.25rem; height: 3.25rem; font-size: 0.5rem; }
  /*
   * No post-it fica só o texto, em letra grande; o texto longo encolhe e corta em dez linhas.
   */
  .reader.is-ready .reader-slide[data-id] .reader-text { font-size: 2.125rem; line-height: 1.24; letter-spacing: -0.01em; -webkit-line-clamp: 10; }
  .reader.is-ready .reader-slide[data-id] .reader-text.is-long { font-size: 1.5rem; line-height: 1.34; letter-spacing: 0; -webkit-line-clamp: 14; }
  /*
   * Com foto, a nota é uma página de álbum com uma polaroid colada por uma fita: a impressão
   * tem a borda de uma polaroid (fina em cima e dos lados, larga em baixo), que nunca estica, e
   * a frase fica escrita na página, por baixo. A foto aparece inteira (as de pé param em 4:5);
   * a altura da polaroid é a base flex e, se a frase não couber, é ela que encolhe, nunca a
   * frase. O ângulo escolhido no envio só se vê no ecrã da foto; aqui a polaroid assenta torta
   * para um lado ou para o outro, alternando entre fichas.
   */
  .reader.is-ready .reader-slide[data-id] .reader-card { container-type: size; }
  .reader.is-ready .reader-slide[data-id] .reader-card:has(.photo) { --mat: 10px; --strip: 50px; --gutter: 32px; padding: 56px 16px 16px; gap: 14px; overflow: hidden; }
  /* À mão, a frase escreve-se na margem: a margem funda é um pouco mais larga. */
  .reader.is-ready .reader-slide[data-id] .reader-card[data-estilo="mao"]:has(.photo) { --strip: 64px; }
  /*
   * A impressão mede-se pela caixa da polaroid (container de tamanho), com altura e largura
   * explícitas na proporção da foto. Com aspect-ratio + altura em %, o Safari dava uma largura
   * menor que a da foto e o object-fit enchia a moldura de branco.
   */
  .reader.is-ready .reader-slide[data-id] .reader-card:has(.photo) .photo-slot {
    position: relative;
    z-index: 0;
    container-type: size;
    flex: 0 1 calc(min(100cqi - var(--gutter), (100cqi - var(--gutter)) * 5 / 4 / var(--r)) * var(--r) + var(--mat) + var(--strip));
    min-height: 0;
    height: auto;
    align-items: flex-start;
    --print-tilt: -1.5deg;
  }
  .reader.is-ready .reader-slide[data-id]:nth-child(odd) .reader-card:has(.photo) .photo-slot { --print-tilt: 1.2deg; }
  .reader.is-ready .reader-slide[data-id] .reader-card:has(.photo):not(:has(.reader-text)) .photo-slot { margin-top: auto; }
  .reader.is-ready .reader-slide[data-id] .reader-card:has(.photo) .photo-slot > .photo {
    --print-h: min(100cqh - var(--mat) - var(--strip), (100cqi - var(--gutter)) * var(--r));
    flex: none;
    box-sizing: content-box;
    width: calc(var(--print-h) / var(--r));
    height: var(--print-h);
    max-width: none;
    object-fit: contain;
    padding: var(--mat) var(--mat) var(--strip);
    background: #fff;
    box-shadow: 0 1px 2px rgba(42, 28, 19, 0.18), 0 10px 18px -10px rgba(42, 28, 19, 0.4);
    transform: rotate(var(--print-tilt));
  }
  /* A fita que segura a polaroid à página. */
  .reader.is-ready .reader-slide[data-id] .reader-card:has(.photo) .photo-slot::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: -8px;
    left: calc(50% - 36px);
    width: 72px;
    height: 20px;
    background: var(--photo-tape);
    box-shadow: var(--photo-tape-edge);
    transform: rotate(-3deg);
    pointer-events: none;
  }
  /* O carimbo assenta no canto da polaroid, com um véu do papel para se ler por cima da foto. */
  .reader.is-ready .reader-slide[data-id] .reader-card:has(.photo) .postmark {
    top: 8px;
    right: 8px;
    background: color-mix(in srgb, color-mix(in srgb, var(--surface) 30%, #D6C09A) 78%, transparent);
  }
  /*
   * A frase e a assinatura andam juntas. Sem estilo o invólucro não conta para o desenho; com
   * estilo (citação, bilhete…) é o recorte de papel, por isso precisa de caixa também no livro
   * de exemplo e no feed. No baralho centra-se no papel que sobra.
   */
  .reader-words { display: contents; }
  :is(.reader.is-ready .reader-slide[data-id], .tema-livro .reader-card[data-estilo], .house-feed .reader-card[data-estilo]) .reader-words {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: none;
    min-width: 0;
    margin-block: auto;
  }
  .reader.is-ready .reader-slide[data-id] .reader-card:has(.photo) .reader-words { padding-inline: 4px; }
  .reader-ink::before { content: "“"; }
  .reader-ink::after { content: "”"; }
  .reader.is-ready .reader-slide[data-id] .reader-card:has(.photo) .reader-text {
    position: relative;
    flex: none;
    margin: 0;
    font-size: 1.1875rem;
    line-height: 1.32;
    -webkit-line-clamp: 4;
  }
  /* Foto deitada: sobra papel, e a frase cresce para perto da letra da nota sem foto. */
  .reader.is-ready .reader-slide[data-id] .reader-card:has(.photo-slot[data-shape="wide"]) .reader-text {
    font-size: 1.625rem;
    line-height: 1.24;
    letter-spacing: -0.01em;
    -webkit-line-clamp: 5;
  }
  .reader.is-ready .reader-slide[data-id] .reader-card:has(.photo-slot[data-shape="wide"]) .reader-text.is-long {
    font-size: 1.25rem;
    line-height: 1.32;
    letter-spacing: 0;
    -webkit-line-clamp: 7;
  }
  /*
   * Quatro maneiras de a frase ficar escrita no álbum, uma por memória (data-estilo, tirado do
   * id): à mão, em citação, num bilhete colado ou em tiras de máquina de escrever. O tamanho da
   * letra continua a vir das regras acima; cada estilo só o multiplica em --ink-scale, para
   * a fonte nova ter o mesmo corpo à vista.
   */
  :is(.reader.is-ready .reader-slide[data-id], .tema-livro, .house-feed) .reader-ink { font-size: calc(1em * var(--ink-scale, 1)); }
  :is(.reader.is-ready .reader-slide[data-id], .tema-livro, .house-feed) .reader-card:is([data-estilo="mao"], [data-estilo="bilhete"], [data-estilo="maquina"]) .reader-ink::before,
  :is(.reader.is-ready .reader-slide[data-id], .tema-livro, .house-feed) .reader-card:is([data-estilo="mao"], [data-estilo="bilhete"], [data-estilo="maquina"]) .reader-ink::after { content: none; }
  /* À mão: tinta azul-escura, um pouco torta, e a assinatura à mão encostada à direita. */
  :is(.reader.is-ready .reader-slide[data-id], .tema-livro, .house-feed) .reader-card:is([data-estilo="mao"], [data-estilo="bilhete"]) .reader-text {
    --ink-scale: 1.3;
    font-family: "Caveat", "Newsreader", cursive;
    font-weight: 600;
    letter-spacing: 0;
    color: #23305C;
  }
  :is(.reader.is-ready .reader-slide[data-id], .tema-livro, .house-feed) .reader-card:is([data-estilo="mao"], [data-estilo="bilhete"]) .reader-ink { line-height: 1.05; }
  :is(.reader.is-ready .reader-slide[data-id], .tema-livro, .house-feed) .reader-card:is([data-estilo="mao"], [data-estilo="bilhete"]) .reader-author {
    font-family: "Caveat", "Newsreader", cursive;
    font-style: normal;
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1;
    color: #23305C;
  }
  :is(.reader.is-ready .reader-slide[data-id], .tema-livro, .house-feed) .reader-card[data-estilo="mao"] .reader-text { rotate: -1deg; }
  :is(.reader.is-ready .reader-slide[data-id], .tema-livro, .house-feed) .reader-card[data-estilo="mao"] .reader-sign { align-items: flex-end; rotate: -2deg; }
  /* Com foto, a frase (curta) vai na margem funda da polaroid e só a assinatura fica no kraft. */
  :is(.reader.is-ready .reader-slide[data-id], .tema-livro, .house-feed) .reader-card[data-estilo="mao"]:has(.photo) .reader-words { margin-top: -66px; padding-inline: 14px; }
  :is(.reader.is-ready .reader-slide[data-id], .tema-livro, .house-feed) .reader-card[data-estilo="mao"]:has(.photo) .reader-text {
    --ink-scale: 1.15;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 54px;
    padding-inline: 12px;
    text-align: center;
    line-height: 0.95;
    rotate: -2deg;
  }
  :is(.reader.is-ready .reader-slide[data-id], .tema-livro, .house-feed) .reader-card[data-estilo="mao"]:has(.photo) .reader-ink { line-height: 0.95; }
  :is(.reader.is-ready .reader-slide[data-id], .tema-livro, .house-feed) .reader-card[data-estilo="mao"]:has(.photo) .reader-sign { margin-top: 8px; margin-right: 8px; }
  /* Citação: serifa grande e leve, aspas de tinta penduradas à esquerda e a assinatura em versaletes. */
  :is(.reader.is-ready .reader-slide[data-id], .tema-livro, .house-feed) .reader-card[data-estilo="citacao"] .reader-text {
    --ink-scale: 1.3;
    position: relative;
    font-weight: 300;
    letter-spacing: -0.015em;
  }
  :is(.reader.is-ready .reader-slide[data-id], .tema-livro, .house-feed) .reader-card[data-estilo="citacao"] .reader-ink { line-height: 1.12; }
  :is(.reader.is-ready .reader-slide[data-id], .tema-livro, .house-feed) .reader-card[data-estilo="citacao"] .reader-ink::before {
    position: absolute;
    top: -0.1rem;
    left: -2rem;
    font-size: 4rem;
    font-weight: 400;
    line-height: 0.8;
    color: var(--stamp);
  }
  :is(.reader.is-ready .reader-slide[data-id], .tema-livro, .house-feed) .reader-card[data-estilo="citacao"] .reader-ink::after { content: none; }
  /* Citação: um recorte de papel creme, preso com duas fitas, a sobrepor a polaroid. */
  :is(.reader.is-ready .reader-slide[data-id], .tema-livro, .house-feed) .reader-card[data-estilo="citacao"] .reader-words {
    align-self: flex-start;
    width: min(100%, 17rem);
    box-sizing: border-box;
    padding: 24px 20px 16px 46px;
    background-color: var(--surface);
    background-image: var(--grain);
    box-shadow: 0 2px 3px rgba(42, 28, 19, 0.18), 0 16px 20px -12px rgba(42, 28, 19, 0.5);
    rotate: -1.8deg;
  }
  :is(.reader.is-ready .reader-slide[data-id], .tema-livro, .house-feed) .reader-card[data-estilo="citacao"]:has(.photo) .reader-words { margin-top: -58px; margin-left: 6px; }
  :is(.reader.is-ready .reader-slide[data-id], .tema-livro, .house-feed) .reader-card[data-estilo="citacao"] .reader-words::before,
  :is(.reader.is-ready .reader-slide[data-id], .tema-livro, .house-feed) .reader-card[data-estilo="citacao"] .reader-words::after {
    content: "";
    position: absolute;
    width: 54px;
    height: 18px;
    background: var(--photo-tape);
    box-shadow: var(--photo-tape-edge);
    transform: rotate(-5deg);
  }
  :is(.reader.is-ready .reader-slide[data-id], .tema-livro, .house-feed) .reader-card[data-estilo="citacao"] .reader-words::before { top: -9px; left: 24px; }
  :is(.reader.is-ready .reader-slide[data-id], .tema-livro, .house-feed) .reader-card[data-estilo="citacao"] .reader-words::after { bottom: -9px; right: 24px; }
  :is(.reader.is-ready .reader-slide[data-id], .tema-livro, .house-feed) .reader-card[data-estilo="citacao"] .reader-author {
    font-family: "Instrument Sans", system-ui, sans-serif;
    font-style: normal;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink);
  }
  /*
   * Bilhete: a página fica em papel e a frase vai num papelinho na cor que o visitante
   * escolheu, colado com fita por cima do canto de baixo da polaroid.
   */
  :is(.reader.is-ready .reader-slide[data-id], .tema-livro, .house-feed) .reader-card[data-estilo="bilhete"] .reader-words {
    align-self: center;
    width: min(100%, 17rem);
    box-sizing: border-box;
    padding: 22px 18px 14px;
    background-color: var(--note, var(--surface));
    background-image: var(--grain);
    box-shadow: 0 2px 3px rgba(42, 28, 19, 0.16), 0 14px 16px -12px rgba(42, 28, 19, 0.4);
    rotate: 2deg;
  }
  :is(.reader.is-ready .reader-slide[data-id], .tema-livro, .house-feed) .reader-card[data-estilo="bilhete"].is-team .reader-words { background-color: var(--featured); }
  :is(.reader.is-ready .reader-slide[data-id], .tema-livro, .house-feed) .reader-card[data-estilo="bilhete"]:has(.photo) .photo-slot { margin-top: auto; }
  :is(.reader.is-ready .reader-slide[data-id], .tema-livro, .house-feed) .reader-card[data-estilo="bilhete"]:has(.photo) .reader-words {
    align-self: flex-end;
    width: min(100%, 15.5rem);
    margin-top: -60px;
    margin-right: 2px;
    padding-inline: 18px;
  }
  :is(.reader.is-ready .reader-slide[data-id], .tema-livro, .house-feed) .reader-card[data-estilo="bilhete"] .reader-words::before {
    content: "";
    position: absolute;
    top: -9px;
    left: calc(50% - 30px);
    width: 60px;
    height: 18px;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 0 0 1px rgba(42, 28, 19, 0.06);
    transform: rotate(-4deg);
  }
  :is(.reader.is-ready .reader-slide[data-id], .tema-livro, .house-feed) .reader-card[data-estilo="bilhete"] .reader-sign {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    column-gap: 10px;
  }
  /* Máquina de escrever: cada linha numa tira de papel colada, e a assinatura numa etiqueta escura. */
  :is(.reader.is-ready .reader-slide[data-id], .tema-livro, .house-feed) .reader-card[data-estilo="maquina"] .reader-text {
    --ink-scale: 1.05;
    font-family: "Special Elite", "Courier New", monospace;
    font-weight: 400;
    letter-spacing: 0;
  }
  :is(.reader.is-ready .reader-slide[data-id], .tema-livro, .house-feed) .reader-card[data-estilo="maquina"] .reader-ink {
    padding: 2px 8px;
    line-height: 1.85;
    color: #1F1A16;
    background: #FFFDF8;
    box-shadow: 0 1px 2px rgba(42, 28, 19, 0.18);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  :is(.reader.is-ready .reader-slide[data-id], .tema-livro, .house-feed) .reader-card[data-estilo="maquina"] .reader-words { align-self: flex-start; rotate: -1deg; }
  :is(.reader.is-ready .reader-slide[data-id], .tema-livro, .house-feed) .reader-card[data-estilo="maquina"]:has(.photo) .reader-words { margin-top: -56px; margin-left: 4px; }
  :is(.reader.is-ready .reader-slide[data-id], .tema-livro, .house-feed) .reader-card[data-estilo="maquina"] .reader-sign { align-items: flex-start; }
  :is(.reader.is-ready .reader-slide[data-id], .tema-livro, .house-feed) .reader-card[data-estilo="maquina"] .reader-author {
    padding: 4px 8px 2px;
    font-family: "Special Elite", "Courier New", monospace;
    font-style: normal;
    font-size: 0.9375rem;
    color: var(--surface);
    background: var(--ink);
    rotate: -0.6deg;
  }
  /*
   * Tudo centrado no cartão. Com foto, a polaroid e a frase colada formam um só conjunto, que
   * se centra na vertical (a margem de baixo da frase fica a zero, senão engole a folga e o
   * conjunto cola-se ao topo). Sem foto, a frase e a assinatura centram-se também na horizontal.
   */
  .reader.is-ready .reader-slide[data-id] .reader-card:has(.photo) { justify-content: center; }
  .reader.is-ready .reader-slide[data-id] .reader-card:has(.photo) .reader-words { margin-bottom: 0; }
  /* O papel colado sobrepõe a polaroid, mas no meio dela e não encostado a um dos lados. */
  :is(.reader.is-ready .reader-slide[data-id], .tema-livro, .house-feed) .reader-card:has(.photo) .reader-words { align-self: center; margin-inline: 0; }
  :is(.reader.is-ready .reader-slide[data-id], .tema-livro, .house-feed) .reader-card:not(:has(.photo)) .reader-words { align-self: center; align-items: center; text-align: center; }
  :is(.reader.is-ready .reader-slide[data-id], .tema-livro, .house-feed) .reader-card:not(:has(.photo)) .reader-text { text-align: center; }
  :is(.reader.is-ready .reader-slide[data-id], .tema-livro, .house-feed) .reader-card:not(:has(.photo)) .reader-sign { align-items: center; rotate: 0deg; }
  :is(.reader.is-ready .reader-slide[data-id], .tema-livro, .house-feed) .reader-card[data-estilo="citacao"]:not(:has(.photo)) .reader-words { width: min(100%, 18rem); padding-right: 24px; }
  :is(.reader.is-ready .reader-slide[data-id], .tema-livro, .house-feed) .reader-card[data-estilo="citacao"]:not(:has(.photo)) .reader-text { text-align: left; }
  :is(.reader.is-ready .reader-slide[data-id], .tema-livro, .house-feed) .reader-card[data-estilo="citacao"]:not(:has(.photo)) .reader-sign { align-items: flex-start; }
  :is(.reader.is-ready .reader-slide[data-id], .tema-livro, .house-feed) .reader-card[data-estilo="bilhete"]:not(:has(.photo)) .reader-text { text-align: left; }
  /* A assinatura e o tempo ficam no papel, por baixo do texto, na cor quieta. */
  .reader-sign { display: flex; flex-direction: column; gap: 2px; flex: none; }
  .reader-quiet {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    font-size: 0.8125rem;
    color: var(--muted);
  }
  .reader-quiet .reader-replies::before { content: " · "; }
  :is(.reader.is-ready .reader-slide[data-id], .tema-livro, .house-feed) .reader-text { margin-block: 0; }
  :is(.reader.is-ready .reader-slide[data-id], .tema-livro, .house-feed) .reader-author { color: var(--muted); }
  :is(.reader.is-ready .reader-slide[data-id], .tema-livro, .house-feed) .reader-page { display: none; }
  /*
   * A capa e a contracapa são a primeira e a última folha do bloco, altas como a caixa vazia, em
   * papel pardo, com tudo dentro do papel. Por trás da capa espreitam dois post-its de cor.
   */
  .reader.is-ready .reader-slide:is([data-lid], [data-end]) .reader-card { overflow: hidden; }
  /* No baralho a capa e a contracapa apertam-se um pouco, para caberem no cartão sem rolar. */
  .reader.is-ready .reader-card.reader-lid { padding: 18px 18px 12px; }
  .reader.is-ready .lid-postcard { width: min(62%, 13rem); margin-top: 12px; }
  .reader.is-ready .lid-postcard .window { max-height: 5.25rem; }
  .reader.is-ready .reader-card.reader-lid { padding-top: 22px; padding-bottom: 24px; }
  .reader.is-ready .lid-postcard.has-photo { width: calc(100% - 8px); max-width: 21rem; margin-top: 24px; }
  .reader.is-ready .lid-postcard.has-photo .arrival-photo { max-height: min(296px, 36svh); }
  .reader.is-ready .lid-title { margin-top: 26px; }
  .reader.is-ready .lid-count { margin-top: 10px; }
  .reader.is-ready .lid-hint { margin-top: auto; }
  .reader.is-ready .reader-end .end-text { padding-top: 8px; }
  .reader.is-ready .reader-end-title { font-size: 2.125rem; }
  .reader.is-ready .end-copy { margin-top: 10px; font-size: 0.9375rem; }
  @media (max-height: 760px) {
    .reader.is-ready .lid-postcard { width: min(50%, 10rem); margin-top: 8px; }
    .reader.is-ready .lid-postcard .window { max-height: 3.25rem; }
    .reader.is-ready .lid-postcard.has-photo { width: min(84%, 16rem); max-width: min(84%, 16rem); margin-top: 14px; padding: 10px 10px 46px; }
    .reader.is-ready .lid-postcard.has-photo .arrival-photo { max-height: min(170px, 26svh); }
    .reader.is-ready .lid-caption { bottom: 7px; font-size: 1.875rem; }
    .reader.is-ready .lid-title { margin-top: 14px; font-size: 2.125rem; }
    .reader.is-ready .lid-count { margin-top: 6px; }
    .reader.is-ready .lid-hint { margin-top: auto; padding-block: 8px; }
    .reader.is-ready .reader-end-title { font-size: 1.875rem; }
  }
  /*
   * Os três modelos da capa (data-modelo, escolhido no tema ou, sem escolha, por lugar): álbum,
   * envelope e tampa. Todos em papel kraft, como as fichas, e com as mesmas peças: o nome da casa,
   * a polaroid com o nome da mesa, o título, a contagem e a dica de arrastar. Só mudam o desenho.
   */
  :is(.reader, .tema-livro) .reader-card.reader-lid[data-modelo] {
    --kraft: color-mix(in srgb, var(--capa, var(--tape)) 62%, #C9AD7E);
    position: relative;
    overflow: hidden;
    background-color: var(--kraft);
    background-image: var(--kraft-tex);
    box-shadow: inset 0 0 0 1px rgba(122, 75, 46, 0.24), 0 22px 26px -18px rgba(42, 28, 19, 0.6);
  }
  :is(.reader, .tema-livro) .reader-lid[data-modelo] .lid-hint {
    background: none;
    padding: 0;
    color: #3D2E23;
    font-family: "Caveat", "Newsreader", cursive;
    font-size: 1.5rem;
    font-weight: 600;
    gap: 8px;
    white-space: nowrap;
    rotate: -2deg;
  }
  :is(.reader, .tema-livro) .reader-lid[data-modelo] .lid-hint svg { flex: none; width: 34px; height: 16px; }

  /* Álbum: etiqueta batida à máquina, polaroid torta com fitas nos cantos e o título num post-it. */
  :is(.reader, .tema-livro) .reader-card.reader-lid[data-modelo="album"] { padding: 24px 22px 20px; align-items: center; text-align: center; }
  :is(.reader, .tema-livro) .reader-lid[data-modelo="album"] .lid-head { align-items: center; }
  :is(.reader, .tema-livro) .reader-lid[data-modelo="album"] .lid-place {
    padding: 7px 12px 5px;
    background: #FFFDF8;
    box-shadow: 0 1px 2px rgba(42, 28, 19, 0.25);
    font-family: "Special Elite", "Courier New", monospace;
    font-size: 0.9375rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: lowercase;
    rotate: -1.5deg;
  }
  :is(.reader, .tema-livro) .reader-lid[data-modelo="album"] .lid-place::before,
  :is(.reader, .tema-livro) .reader-lid[data-modelo="album"] .lid-place::after { content: none; }
  :is(.reader, .tema-livro) .reader-lid[data-modelo="album"] .lid-postcard.has-photo { align-self: center; margin-top: 24px; rotate: -1.5deg; }
  :is(.reader, .tema-livro) .reader-lid[data-modelo="album"] .lid-postcard.has-photo::before,
  :is(.reader, .tema-livro) .reader-lid[data-modelo="album"] .lid-postcard.has-photo::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: -8px;
    width: 74px;
    height: 22px;
    background: rgba(214, 232, 226, 0.82);
  }
  :is(.reader, .tema-livro) .reader-lid[data-modelo="album"] .lid-postcard.has-photo::before { left: -18px; transform: rotate(-38deg); }
  :is(.reader, .tema-livro) .reader-lid[data-modelo="album"] .lid-postcard.has-photo::after { right: -18px; transform: rotate(38deg); }
  :is(.reader, .tema-livro) .reader-lid[data-modelo="album"] .lid-text { position: relative; flex: 1 1 auto; align-self: stretch; align-items: center; justify-content: center; margin-top: 18px; padding: 0; }
  :is(.reader, .tema-livro) .reader-lid[data-modelo="album"] .lid-title {
    position: relative;
    box-sizing: border-box;
    max-width: 100%;
    margin: 0;
    padding: 22px 22px 14px;
    background: #F6E7A6;
    box-shadow: 0 2px 3px rgba(42, 28, 19, 0.2), 0 18px 22px -12px rgba(42, 28, 19, 0.45);
    font-family: "Caveat", "Newsreader", cursive;
    font-size: clamp(1.9rem, 9.6vw, 2.4rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    color: #23305C;
    rotate: 1.5deg;
  }
  :is(.reader, .tema-livro) .reader-lid[data-modelo="album"] .lid-title::before {
    content: "";
    position: absolute;
    top: -11px;
    left: calc(50% - 32px);
    width: 64px;
    height: 20px;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 0 0 1px rgba(42, 28, 19, 0.06);
    transform: rotate(-5deg);
  }
  :is(.reader, .tema-livro) .reader-lid[data-modelo="album"] .lid-title em { font-style: normal; color: color-mix(in srgb, var(--stamp) 85%, #000); }
  :is(.reader, .tema-livro) .reader-lid[data-modelo="album"] .lid-hint { font-size: 1.25rem; }
  :is(.reader, .tema-livro) .reader-lid[data-modelo="album"] .lid-mesa { margin-bottom: 20px; }
  /* O canto dobrado, a convidar a virar a página. */
  :is(.reader, .tema-livro) .reader-lid[data-modelo="album"]::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, transparent 50%, color-mix(in srgb, var(--kraft) 80%, #6B4A25) 50%);
    box-shadow: -2px -2px 4px rgba(42, 28, 19, 0.18);
    pointer-events: none;
  }

  /* Envelope: uma só folha de kraft, calma: a casa, a polaroid com a mesa, a frase, a contagem e a dica. */
  :is(.reader, .tema-livro) .reader-card.reader-lid[data-modelo="envelope"] {
    --kraft: color-mix(in srgb, var(--capa, var(--tape)) 62%, #C9AD7E);
    padding: 24px 24px 22px;
    align-items: center;
    text-align: center;
  }
  :is(.reader, .tema-livro) .reader-lid[data-modelo="envelope"] .lid-head { position: relative; z-index: 2; }
  :is(.reader, .tema-livro) .reader-lid[data-modelo="envelope"] .lid-postcard.has-photo {
    position: relative;
    z-index: 1;
    align-self: center;
    width: calc(100% - 8px);
    margin-top: 22px;
    rotate: -1deg;
  }
  :is(.reader, .tema-livro) .reader-lid[data-modelo="envelope"] .lid-postcard.has-photo::before { content: none; }
  :is(.reader, .tema-livro) .reader-lid[data-modelo="envelope"] .lid-text {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    align-self: stretch;
    align-items: center;
    justify-content: center;
    margin: 18px 0 0;
    padding: 0;
    text-align: center;
  }
  :is(.reader, .tema-livro) .reader-lid[data-modelo="envelope"] .lid-title {
    margin: 0;
    padding: 0;
    background: none;
    box-shadow: none;
    font-family: "Caveat", "Newsreader", cursive;
    font-size: clamp(1.9rem, 9vw, 2.3rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0;
    text-align: center;
    color: var(--ink);
    rotate: 0deg;
  }
  :is(.reader, .tema-livro) .reader-lid[data-modelo="envelope"] .lid-title::before {
    content: "para quem vier depois";
    display: block;
    margin-bottom: 6px;
    font-family: "Instrument Sans", system-ui, sans-serif;
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: #4A3523;
  }
  :is(.reader, .tema-livro) .reader-lid[data-modelo="envelope"] .lid-title em { font-style: normal; color: color-mix(in srgb, var(--stamp) 85%, #000); }
  :is(.reader, .tema-livro) .reader-lid[data-modelo="envelope"] .lid-hint { position: static; margin: 0; padding-top: 12px; font-size: 1.25rem; rotate: 0deg; }

  /* Tampa: a tampa de uma caixa, com a moldura em relevo, uma etiqueta de metal com a mesa e o título carimbado. */
  :is(.reader, .tema-livro) .reader-card.reader-lid[data-modelo="tampa"] {
    --kraft: color-mix(in srgb, var(--capa, var(--tape)) 55%, #BF9F70);
    padding: 30px 28px 24px;
    align-items: center;
    text-align: center;
    box-shadow: inset 0 0 0 10px rgba(120, 86, 48, 0.28), inset 0 0 0 11px rgba(60, 40, 20, 0.25), inset 0 0 30px rgba(60, 40, 20, 0.25), 0 26px 30px -18px rgba(42, 28, 19, 0.65);
  }
  :is(.reader, .tema-livro) .reader-lid[data-modelo="tampa"] .lid-postcard.has-photo { align-self: center; width: calc(100% - 8px); margin-top: 20px; rotate: -1deg; }
  :is(.reader, .tema-livro) .reader-lid[data-modelo="tampa"] .lid-postcard.has-photo::before { content: none; }
  :is(.reader, .tema-livro) .reader-lid[data-modelo="tampa"] .lid-caption { display: none; }
  :is(.reader, .tema-livro) .reader-lid[data-modelo="tampa"] .lid-text { position: relative; z-index: 2; flex: 1 1 auto; align-self: stretch; align-items: center; justify-content: center; margin-top: 18px; padding: 0; }
  :is(.reader, .tema-livro) .reader-lid[data-modelo="tampa"] .lid-mesa {
    display: block;
    padding: 9px 26px 8px;
    border: 7px solid #A7A9AA;
    border-radius: 10px;
    background: #FBF6EA;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(42, 28, 19, 0.35);
    font-family: "Newsreader", Georgia, serif;
    font-size: 1.5rem;
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: #2A1C13;
  }
  :is(.reader, .tema-livro) .reader-lid[data-modelo="tampa"] .lid-mesa::before,
  :is(.reader, .tema-livro) .reader-lid[data-modelo="tampa"] .lid-mesa::after { content: none; }
  :is(.reader, .tema-livro) .reader-lid[data-modelo="tampa"] .lid-title {
    margin: 20px 0 0;
    font-family: "Instrument Sans", system-ui, sans-serif;
    font-size: clamp(1.25rem, 6.4vw, 1.5rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--stamp) 80%, #000);
  }
  :is(.reader, .tema-livro) .reader-lid[data-modelo="tampa"] .lid-title em { font-style: normal; color: inherit; }
  :is(.reader, .tema-livro) .reader-lid[data-modelo="tampa"] .lid-hint { margin: 0; padding-top: 12px; font-size: 1.25rem; rotate: 0deg; }
  /* A contagem, nos três modelos: uma pílula calma com um ponto, nunca uma etiqueta que transborda. */
  :is(.reader, .tema-livro) .reader-lid[data-modelo] .lid-count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: static;
    width: auto;
    height: auto;
    margin: 18px 0 0;
    padding: 6px 14px;
    border: 1.5px solid var(--ink);
    border-radius: 999px;
    background: none;
    box-shadow: none;
    font-family: "Instrument Sans", system-ui, sans-serif;
    font-size: 0.8125rem;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
    rotate: 0deg;
  }
  :is(.reader, .tema-livro) .reader-lid[data-modelo] .lid-count::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--stamp) 85%, #000); }
  /*
   * O verso do bloco é cartão, não papel pardo como a capa: mais escuro, com uma quadrícula fina
   * em relevo e um tracejado a coser a margem.
   */
  .reader.is-ready .reader-slide[data-end] .reader-card.reader-end {
    background-color: color-mix(in srgb, var(--capa, var(--tape)) 82%, #7A4B2E);
    background-image:
      linear-gradient(rgba(42, 28, 19, 0.07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(42, 28, 19, 0.07) 1px, transparent 1px),
      radial-gradient(rgba(255, 252, 247, 0.16) 0.6px, transparent 0.8px);
    background-size: 14px 14px, 14px 14px, 5px 5px;
  }
  /* No cartão mais escuro, a cidade e o "FIM" escurecem para ler bem. */
  .reader.is-ready .reader-slide[data-end] .lid-city { color: var(--body); }
  .reader.is-ready .reader-slide[data-end] .lid-mesa { color: color-mix(in srgb, var(--stamp) 70%, black); }
  .reader.is-ready .reader-slide[data-end] .reader-card.reader-end::after {
    content: "";
    position: absolute;
    inset: 9px;
    border: 1.5px dashed rgba(42, 28, 19, 0.28);
    pointer-events: none;
  }
  .reader.is-ready.is-at-lid .reader-deck::before,
  .reader.is-ready.is-at-lid .reader-deck::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    box-shadow: 0 12px 14px -12px rgba(42, 28, 19, 0.45);
  }
  .reader.is-ready.is-at-lid .reader-deck::before { background: var(--note-rosa); transform: translate(9px, 7px) rotate(2.6deg); }
  .reader.is-ready.is-at-lid .reader-deck::after { background: var(--note-amarelo); transform: translate(-6px, 5px) rotate(-1.8deg); }
  /*
   * Por cima do bloco, nas memórias: o lugar e a mesa, e a fila de cores com a posição. Na capa e
   * na contracapa fica invisível, sem mexer no bloco.
   */
  .reader-top { display: none; }
  .reader.is-ready .reader-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; }
  .reader.is-ready .reader-top-line:last-child { flex: 1; min-width: 0; justify-content: flex-end; }
  .reader.is-ready:is(.is-at-lid, .is-at-end) .reader-top { visibility: hidden; }
  .reader-top-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 18px; }
  .reader-top-place { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.22em; color: var(--ink); }
  .reader-top-mesa, .reader-top-pos { font-family: "Newsreader", Georgia, serif; font-style: italic; font-size: 0.875rem; color: var(--body); }
  .reader-chips { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 3px; overflow: hidden; }
  /* A linha do topo do cartão (logótipo, mesa, dia): substitui a barra de cima e o carimbo, em todas as larguras. */
  .card-head { display: none; }
  .reader.is-ready .reader-top { display: none; }
  .reader.is-ready .reader-slide[data-id] .postmark { display: none; }
  .reader.is-ready .reader-slide[data-id] .card-head {
    position: absolute;
    top: 16px;
    left: 20px;
    right: 20px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 28px;
    pointer-events: none;
  }
  .card-head-place { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; color: var(--ink); }
  .card-head-logo { flex: none; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
  .card-head-when { flex: none; font-size: 0.8125rem; color: var(--body); }
  .reader-chip { flex: none; width: 12px; height: 12px; background: var(--note, var(--surface)); box-shadow: 0 0 0 1px rgba(42, 28, 19, 0.22); }
  .reader-chip.is-team { background: var(--featured); }
  .reader-chip.is-current { width: 16px; height: 16px; box-shadow: 0 0 0 1.5px var(--ink); transform: rotate(-6deg); }
  /* Os papéis também têm grão, para não parecerem plástico liso. */
  .card, .card.is-team, .story, .sheet, .reply-parent, .care-item, .reader-card, .house-card, .house-count {
    background-image: var(--grain);
  }
  /* Painel da casa: a mesma mesa de papel, para quem decide o que entra e o que sai. */
  .house-screen { width: min(100%, 32rem); gap: 28px; }
  /*
   * A capa do lugar é o próprio formulário: o que se vê é o que o visitante vê. O título, a frase e a
   * escrevem-se no lugar; a foto ajusta-se nela, com a mesma barra dos cartões.
   */
  .capa { position: relative; display: flex; flex-direction: column; gap: 12px; --capa-accent: var(--stamp); }
  .capa-lid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px;
    text-align: center;
    background-color: var(--tape);
    background-image: repeating-linear-gradient(176deg, rgba(122, 75, 46, 0) 0 9px, rgba(122, 75, 46, 0.07) 9px 10px);
    box-shadow: inset 0 0 0 1px rgba(122, 75, 46, 0.18), 0 10px 18px -12px rgba(42, 28, 19, 0.45);
  }
  .capa-lid .cover-house { font-size: 0.6875rem; }
  .capa-empty {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 16px;
    border: 2px dashed color-mix(in srgb, var(--capa-accent) 65%, transparent);
    background: rgba(255, 252, 247, 0.55);
    color: var(--capa-accent);
  }
  .capa-empty strong { color: var(--ink); font-size: 1rem; }
  .capa-copy { font-size: 0.8125rem; color: var(--body); }
  .capa-photo { position: relative; width: 100%; display: flex; justify-content: center; }
  /* Ao ajustar, o postal roda dentro de uma caixa que já conta com a rotação (como nos cartões). */
  .capa-photo.is-editing { width: auto; margin-inline: auto; }
  .capa-photo.is-editing .capa-print { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(var(--photo-angle, -2deg)); }
  .capa-print {
    position: relative;
    padding: 8px 8px 30px;
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(42, 28, 19, 0.2);
    transform: rotate(var(--photo-angle, -2deg));
  }
  .capa.is-adjusting .capa-print { outline: 2px solid var(--capa-accent); }
  .capa-print canvas { display: block; touch-action: none; cursor: grab; }
  .capa-print canvas:active { cursor: grabbing; }
  .capa-print canvas:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
  .capa-current { display: block; max-width: 17.5rem; max-height: 300px; width: auto; height: auto; cursor: pointer; }
  .capa-hint, .capa-tap { margin: 0; font-size: 0.8125rem; color: var(--muted); }
  .capa-tools { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .capa-mesa {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    color: var(--capa-accent);
  }
  .capa-mesa::before, .capa-mesa::after { content: ""; width: 22px; height: 1px; background: currentColor; }
  .capa-mesa-input {
    min-width: 8rem;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: center;
    text-transform: uppercase;
    font: 600 0.6875rem "Instrument Sans", system-ui, sans-serif;
    letter-spacing: 0.24em;
    color: inherit;
    field-sizing: content;
  }
  .capa-title {
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: center;
    font: 300 2.375rem/1.1 "Newsreader", Georgia, serif;
    color: var(--ink);
  }
  .capa-phrase {
    width: 100%;
    max-width: 22rem;
    box-sizing: border-box;
    padding: 0;
    border: 0;
    background: transparent;
    resize: none;
    text-align: center;
    font: italic 1rem/1.4 "Newsreader", Georgia, serif;
    color: var(--body);
  }
  .capa-count { font-size: 0.8125rem; color: var(--muted); }
  .capa input[type="text"]:focus-visible, .capa textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
  .capa input::placeholder, .capa textarea::placeholder { color: #6B5848; opacity: 1; }
  .capa.is-enhanced .leave-shot-pick input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
  .capa-window { align-self: flex-start; }
  .house-counts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
  }
  .house-count {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 14px 8px 12px;
    background-color: var(--surface);
    box-shadow: 0 1px 0 var(--line), 0 10px 18px -16px rgba(42, 28, 19, 0.45);
    text-align: center;
  }
  .house-count dd {
    margin: 0;
    font-family: "Newsreader", Georgia, serif;
    font-size: 1.75rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .house-count dt {
    margin: 0;
    color: var(--muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.3;
  }
  .house-section { display: flex; flex-direction: column; gap: 14px; }
  .house-section h2 { font-size: 1.375rem; }
  .house-list { display: flex; flex-direction: column; gap: 16px; }
  .house-card { gap: 12px; }
  .house-card .photo { max-width: calc(100cqi - 16px); }
  .house-parent {
    margin: 0;
    padding-left: 12px;
    border-left: 1.5px solid var(--line);
    color: var(--body);
    font-family: "Newsreader", Georgia, serif;
    font-style: italic;
    font-size: 1rem;
    line-height: 1.4;
  }
  .house-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .house-actions form { margin: 0; }
  .house-actions .primary,
  .house-actions .secondary {
    min-height: 48px;
    padding: 10px 12px;
  }
  @media (max-width: 24em) {
    .house-actions { grid-template-columns: minmax(0, 1fr); }
  }
  @media (prefers-reduced-motion: reduce) {
    .is-sending .leave-card { transform: none; }
    .lid-postcard .steam, .lid-postcard .glow { animation: none; }
  }
  /*
   * Com letra grande ou zoom, a ilustração encolhe para o caminho das memórias caber cedo.
   * 22.5em (360 px) para não apanhar telemóveis de 375 px, que têm espaço para a barra numa linha.
   */
  @media (max-width: 22.5em) {
    .lid-postcard .window { max-height: 4.5rem; width: auto; margin: 0 auto; }
    .lid-title { font-size: 2.25rem; }
    .lid-mesa::before, .lid-mesa::after { display: none; }
    /* Com zoom grande, o carimbo tapava o texto: é decoração, sai. */
    .postmark { display: none; }
    .reader.is-ready .reader-stage { min-height: 20rem; }
    .reader-controls { flex-wrap: wrap; }
    .reader-controls .reader-leave { order: 3; flex-basis: 100%; }
    .care-item { flex-direction: column; gap: 10px; }
  }
  .house-screen { gap: 22px; }
  .house-screen .fine { margin: 0; text-align: left; }
  .house-screen .lede { font-size: 1.125rem; line-height: 1.35; color: var(--body); }
  .house-wide > .secondary { align-self: flex-start; min-width: 12rem; }
  .place-list { display: flex; flex-direction: column; gap: 12px; }
  .house-screen.house-wide { width: min(100%, 72rem); }
  /* A lista é uma grade de capas: cada lugar mostra a sua capa, e por baixo o estado. */
  .place-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  @media (min-width: 40em) {
    .place-grid { grid-template-columns: repeat(auto-fill, minmax(13.75rem, 1fr)); gap: 40px 28px; }
  }
  .place-card { display: flex; flex-direction: column; gap: 10px; color: inherit; text-align: left; }
  .place-coverwrap { position: relative; display: block; }
  .place-cover { display: block; color: inherit; text-decoration: none; }
  .place-cover:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
  .cover-lid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    aspect-ratio: 3 / 4;
    box-sizing: border-box;
    padding: 12px 10px 10px;
    text-align: center;
    background-color: var(--tape);
    background-image: repeating-linear-gradient(176deg, rgba(122, 75, 46, 0) 0 9px, rgba(122, 75, 46, 0.07) 9px 10px);
    box-shadow: inset 0 0 0 1px rgba(122, 75, 46, 0.18), 0 10px 18px -12px rgba(42, 28, 19, 0.45);
    transition: transform 150ms ease-out;
  }
  .place-cover:hover .cover-lid { transform: translateY(-2px); }
  .cover-house { font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.26em; text-indent: 0.26em; color: var(--ink); }
  .cover-print {
    display: block;
    flex: none;
    width: fit-content;
    max-width: 82%;
    padding: 4px 4px 15px;
    background-color: var(--surface);
    background-image: var(--grain);
    box-shadow: 0 1px 2px rgba(42, 28, 19, 0.2);
    transform: rotate(var(--photo-angle, -1.5deg));
  }
  /* A janela não traz ângulo. --photo-angle está registada (vale 0) e o fallback do var() não corre. */
  .cover-print.is-window { transform: rotate(-1.5deg); }
  .cover-print .arrival-photo { display: block; width: auto; max-width: 100%; height: auto; max-height: 9rem; }
  .cover-print.is-window { width: 64%; }
  .cover-print svg { display: block; width: 100%; height: auto; }
  .cover-mesa { margin-top: auto; font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.22em; color: var(--capa-accent, var(--stamp)); }
  .cover-lid strong { font-family: "Newsreader", Georgia, serif; font-size: 1.0625rem; line-height: 1.05; font-weight: 400; }
  .cover-count { margin-bottom: auto; font-family: "Newsreader", Georgia, serif; font-size: 0.75rem; color: var(--body); }
  .place-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
  .place-visit {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    color: var(--ink);
    font-family: "Instrument Sans", system-ui, sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .place-visit:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
  .place-card .wait {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .place-card .quiet {
    font-family: "Newsreader", Georgia, serif;
    font-style: italic;
    font-size: 1rem;
    color: var(--muted);
  }
  .house-card .byline {
    font-family: "Instrument Sans", system-ui, sans-serif;
    font-size: 0.8125rem;
    font-style: normal;
  }
  .house-card .thought {
    margin: 0;
    font-family: "Newsreader", Georgia, serif;
    font-size: 1.1875rem;
    line-height: 1.42;
  }
  /* A ficha: o estado no topo, a capa à esquerda e as definições à direita, sem acordeões. */
  .ficha-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .ficha-visit { min-height: 44px; padding: 0 16px; font-size: 0.875rem; text-decoration: none; display: inline-flex; align-items: center; }
  .ficha-head h1 { font-size: 2.5rem; line-height: 1.05; }
  /*
   * A ficha do lugar: navegação do painel, caminho, estado numa linha, e duas colunas — as secções
   * à esquerda, sempre na mesma ordem, e o livro da visita à direita, uma vez só, fixo ao descer.
   */
  .ficha-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.875rem; color: var(--body); }
  .ficha-crumbs a { color: inherit; text-underline-offset: 3px; }
  .ficha-crumbs [aria-current] { color: var(--ink); font-weight: 600; }
  .ficha .ficha-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
  .ficha-head-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .ficha-head-text h1 { margin: 0; }
  .ficha-status { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 4px 0 0; font-size: 0.875rem; color: var(--body); }
  .ficha-status span { display: inline-flex; align-items: center; gap: 6px; }
  .ficha-status .is-ok { color: var(--curation); font-weight: 600; }
  .ficha-status .is-ok::before, .ficha-status .is-off::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
  .ficha-status .is-off { color: var(--muted); font-weight: 600; }
  .ficha-head-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .ficha-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
  @media (min-width: 64em) {
    .ficha-preview-link { display: none; }
    .ficha-layout { grid-template-columns: minmax(0, 1fr) minmax(16rem, 21rem); gap: 36px; }
    .ficha-preview { position: sticky; top: 16px; }
  }
  .ficha-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  .ficha-main > .ficha-section,
  .ficha-main > [data-estilo-panel] > .ficha-section {
    padding: 22px 24px;
    border: 0;
    border-radius: 14px;
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
  }
  .ficha-main > .ficha-section .ficha-section-head h2,
  .ficha-main > [data-estilo-panel] > .ficha-section .ficha-section-head h2 { font-size: 1.1875rem; }
  .ficha-main > .ficha-section.is-danger { background: transparent; box-shadow: inset 0 0 0 1px #E3B9AC; }
  .ficha-main > .ficha-section.is-danger .ficha-section-head h2 { font-size: 1rem; }
  .ficha-preview .tema-livro-col { position: static; max-width: none; }
  .ficha-preview .tema-livro-col > .fine:first-child { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
  /* Na ficha, a capa é só a foto: o texto vai em campos com rótulo, e a capa inteira vê-se no livro. */
  .capa.is-fields { gap: 8px; }
  /* A foto vai ligeiramente torta: o espaço em cima e em baixo deixa-a rodar sem tapar o aviso. */
  .capa.is-fields .capa-photo { padding-block: 32px; }
  .capa.is-fields .capa-tap { text-align: center; }
  .capa-field-label { font-size: 0.96875rem; font-weight: 500; }
  .capa.is-fields .capa-lid { padding: 14px; background-image: none; background-color: var(--ground); box-shadow: inset 0 0 0 1px var(--line); border-radius: 12px; }
  .ficha-capa .field > .fine { margin: 0; }
  .ficha-capa .ficha-phrase textarea {
    background-image: none;
    font: 400 1rem/1.45 "Instrument Sans", system-ui, sans-serif;
    border-radius: 10px;
    background-color: var(--white);
    padding: 10px 12px;
  }
  .ficha-capa .field-count { align-self: flex-end; }
  .ficha-segment { display: inline-flex; flex-wrap: wrap; gap: 4px; align-self: flex-start; margin: 0; padding: 4px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
  .ficha-segment label { position: relative; display: flex; }
  .ficha-segment input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
  .ficha-segment span { min-height: 40px; padding: 0 16px; display: flex; align-items: center; border-radius: 999px; font-size: 0.9375rem; color: var(--body); }
  .ficha-segment input:checked + span { background: var(--white); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(42, 28, 19, 0.16); }
  .ficha-segment input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
  .ficha-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; }
  .ficha-switch-label { font-weight: 600; }
  /* Os separadores da ficha: Capa, Estilo, Peça e QR, Visita. Ligações simples, uma parte de cada vez. */
  .ficha-tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
  .ficha-tabs a { flex: none; padding: 12px 16px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--body); font-size: 0.9375rem; text-decoration: none; white-space: nowrap; }
  .ficha-tabs a:hover { color: var(--ink); }
  .ficha-tabs a[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
  .ficha-tabs a:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
  .ficha-layout.is-single { grid-template-columns: minmax(0, 1fr); max-width: 48rem; }
  .estilo-segment { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; margin: 0; border-radius: 999px; background: color-mix(in srgb, var(--ink) 7%, transparent); max-width: 26rem; }
  .estilo-segment button { min-height: 40px; border: 0; border-radius: 999px; background: transparent; font: 500 0.9375rem "Instrument Sans", system-ui, sans-serif; color: var(--body); cursor: pointer; }
  .estilo-segment button[aria-pressed="true"] { background: var(--white); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(42, 28, 19, 0.16); }
  /*
   * O estúdio do Estilo: cada opção desenha-se a si própria. Sem JS, as partes ficam todas à vista;
   * com JS (.is-live), uma de cada vez, escolhida na barra das partes ou tocando no livro.
   * As miniaturas pintam-se com o tema em vigor (--e-*), menos os estilos prontos, que trazem as suas cores.
   */
  .estudio { display: flex; flex-direction: column; gap: 18px; }
  .estudio [hidden] { display: none !important; }
  .estudio-follow { margin: 0; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 6%, transparent); font-size: 0.875rem; line-height: 1.45; }
  .estudio-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .estudio-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); cursor: pointer; }
  .estudio-icon:disabled { opacity: 0.4; cursor: default; }
  .estudio-status { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 6px; font-size: 0.8125rem; font-weight: 600; color: var(--body); }
  .estudio-status::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #56685C; transition: background-color 0.3s; }
  .estudio-status[data-state="saving"]::before { background: var(--stamp); }
  .estudio-status[data-state="error"] { color: #8A2A12; }
  .estudio-status[data-state="error"]::before { background: #B3261E; }
  .estudio-surpresa { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--stamp) 13%, var(--white)); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
  .estudio-surpresa:hover { background: color-mix(in srgb, var(--stamp) 22%, var(--white)); }
  .estudio-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  @media (min-width: 40em) {
    .estudio-nav { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  }
  .estudio-cat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 62px; padding: 8px 2px; border: 0; border-radius: 12px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font: inherit; font-size: 0.75rem; font-weight: 600; cursor: pointer; transition: background-color 0.15s, color 0.15s; }
  .estudio-cat[aria-pressed="true"] { background: var(--ink); color: var(--white); box-shadow: none; }
  .estudio-pane { display: flex; flex-direction: column; gap: 18px; }
  .estudio:not(.is-live) .estudio-pane + .estudio-pane { padding-top: 16px; border-top: 1px solid var(--line); }
  .estudio-pane-title { margin: 0; font-size: 1rem; font-weight: 600; }
  .estudio.is-live .estudio-pane-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .estudio-group { display: flex; flex-direction: column; gap: 10px; }
  .estudio-group h4 { margin: 0; font-size: 0.9375rem; font-weight: 600; }
  .estudio-group .fine { margin: -6px 0 0; }
  .estudio-hint { margin: 0; }
  .estudio-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .estudio-opts.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .estudio-opt { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0; padding: 8px 8px 10px; border: 0; border-radius: 14px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: box-shadow 0.15s, transform 0.15s; }
  .estudio-opt:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 40%, transparent); }
  .estudio-opt[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--ink), 0 6px 16px -10px rgba(42, 28, 19, 0.45); }
  .estudio-opt-name { padding: 0 4px; font-size: 0.9375rem; font-weight: 600; }
  .estudio-opt-detail { padding: 0 4px; font-size: 0.75rem; line-height: 1.35; color: var(--body); }
  .estudio-swatches { display: flex; flex-wrap: wrap; gap: 6px 8px; }
  .estudio-swatch { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 60px; padding: 4px 2px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 0.75rem; cursor: pointer; }
  .estudio-swatch[aria-pressed="true"] { font-weight: 600; }
  .estudio-dot { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(42, 28, 19, 0.18); transition: box-shadow 0.15s, transform 0.15s; }
  .estudio-dot svg { opacity: 0; color: var(--ink); }
  .estudio-dot[data-tom="escuro"] svg { color: #FFFFFF; }
  .estudio-swatch:hover .estudio-dot { transform: scale(1.07); }
  .estudio-swatch[aria-pressed="true"] .estudio-dot { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--ink); }
  .estudio-swatch[aria-pressed="true"] .estudio-dot svg { opacity: 1; }
  .estudio :is(.estudio-opt, .estudio-swatch, .estudio-cat, .estudio-icon, .estudio-surpresa):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .estudio-mini { position: relative; display: flex; align-items: center; justify-content: center; height: 84px; border-radius: 10px; background: var(--e-fundo); color: var(--e-tinta); overflow: hidden; transition: background-color 0.3s, color 0.3s; }
  .estudio-mini .m-foto { display: block; background: var(--e-foto) center / cover, color-mix(in srgb, var(--e-acento) 25%, var(--e-papel)); }
  .estudio-mini[data-mini="estilo"] { align-items: flex-end; gap: 8px; padding-bottom: 12px; background: var(--m-fundo); }
  .estudio-mini[data-mini="estilo"] .m-capa { display: flex; align-items: center; justify-content: center; width: 40px; height: 56px; border-radius: 3px; background: var(--m-capa); box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.35); font: 600 0.8125rem var(--m-titulo); color: var(--e-acento); }
  .estudio-mini[data-mini="estilo"] .m-folha { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 40px; height: 56px; border-radius: 3px; background: var(--m-papel); box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.35); color: var(--m-tinta); }
  .estudio-mini[data-mini="estilo"] .m-folha b { font: 400 1.125rem/1 var(--m-titulo); }
  .estudio-mini[data-mini="estilo"] .m-folha i { display: block; width: 22px; height: 2px; background: currentColor; opacity: 0.35; }
  .estudio-mini[data-mini="estilo"] .m-folha i + i { width: 15px; }
  .estudio-mini[data-mini="tipo"] { flex-direction: column; align-items: flex-start; gap: 6px; padding: 0 12px; background: var(--e-papel); }
  .estudio-mini[data-mini="tipo"] b { font-weight: 400; font-size: 1.75rem; line-height: 1; }
  .estudio-mini[data-mini="tipo"] small { font-size: 0.6875rem; line-height: 1.3; }
  .estudio-mini[data-mini="moldura"] .m-moldura { display: block; }
  .estudio-mini[data-mini="moldura"][data-id="polaroid"] .m-moldura { padding: 5px 5px 15px; background: #FFFFFF; rotate: -4deg; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.35); }
  .estudio-mini[data-mini="moldura"][data-id="polaroid"] .m-foto { width: 42px; height: 50px; }
  .estudio-mini[data-mini="moldura"][data-id="margem"] .m-moldura { padding: 5px; background: var(--e-papel); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--e-tinta) 30%, transparent); }
  .estudio-mini[data-mini="moldura"][data-id="margem"] .m-foto { width: 46px; height: 54px; }
  .estudio-mini[data-mini="moldura"][data-id="cheia"] .m-moldura { width: 54px; height: 70px; overflow: hidden; border-radius: 3px; background: var(--e-papel); box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.3); }
  .estudio-mini[data-mini="moldura"][data-id="cheia"] .m-foto { width: 54px; height: 46px; }
  .estudio-mini[data-mini="modelo"] .m-livro { position: relative; display: block; width: 50px; height: 66px; border-radius: 3px; background: var(--e-capa); box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.35); }
  .estudio-mini[data-mini="modelo"] .m-polaroid { position: absolute; top: 7px; left: 7px; padding: 3px 3px 8px; background: #FFFFFF; rotate: -6deg; }
  .estudio-mini[data-mini="modelo"] .m-polaroid .m-foto { width: 22px; height: 22px; }
  .estudio-mini[data-mini="modelo"] .m-postit { position: absolute; right: 5px; bottom: 9px; width: 22px; height: 15px; background: var(--e-papel); rotate: 4deg; box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--e-acento) 55%, transparent); }
  .estudio-mini[data-mini="modelo"][data-id="envelope"] .m-livro { width: 64px; height: 46px; margin-top: 12px; background: color-mix(in srgb, var(--e-tinta) 14%, var(--e-capa)); }
  .estudio-mini[data-mini="modelo"][data-id="envelope"] .m-polaroid { top: -12px; left: 18px; rotate: 5deg; }
  .estudio-mini[data-mini="modelo"][data-id="envelope"] .m-aba { position: absolute; inset: 8px 0 0 0; border-radius: 0 0 3px 3px; background: var(--e-capa); clip-path: polygon(0 0, 50% 40%, 100% 0, 100% 100%, 0 100%); }
  .estudio-mini[data-mini="modelo"][data-id="tampa"] .m-livro { width: 58px; height: 58px; box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--e-tinta) 14%, var(--e-capa)), 0 4px 10px -4px rgba(0, 0, 0, 0.35); }
  .estudio-mini[data-mini="modelo"] .m-fio-v { position: absolute; top: 0; bottom: 0; left: 35px; width: 2px; background: var(--e-tinta); opacity: 0.55; }
  .estudio-mini[data-mini="modelo"] .m-fio-h { position: absolute; left: 0; right: 0; top: 22px; height: 2px; background: var(--e-tinta); opacity: 0.55; }
  .estudio-mini[data-mini="modelo"] .m-etiqueta { position: absolute; left: 7px; top: 32px; width: 28px; height: 14px; border-radius: 3px; background: #DAD5CC; box-shadow: inset 0 0 0 1px #B5AEA2; rotate: -6deg; }
  .estudio-mini[data-mini="nota"] { padding: 0 10px; background: var(--e-papel); }
  .estudio-mini .m-mao { font: 500 1.375rem/1.05 "Caveat", cursive; rotate: -2deg; }
  .estudio-mini .m-cita { display: flex; align-items: flex-start; gap: 4px; font: italic 0.9375rem/1.25 "Newsreader", Georgia, serif; }
  .estudio-mini .m-cita b { font: 400 2.125rem/0.9 "Newsreader", Georgia, serif; color: var(--e-acento); }
  .estudio-mini .m-bilhete { position: relative; padding: 8px 10px; background: #FFFFFF; rotate: 2deg; box-shadow: 0 4px 8px -4px rgba(0, 0, 0, 0.3); font-size: 0.75rem; }
  .estudio-mini .m-bilhete::before { content: ""; position: absolute; top: -6px; left: 10px; width: 28px; height: 10px; background: color-mix(in srgb, var(--e-capa) 75%, transparent); }
  .estudio-mini .m-maquina { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; font-family: "Special Elite", "Courier New", monospace; }
  .estudio-mini .m-maquina b { padding: 2px 5px; background: var(--e-tinta); color: var(--e-papel); font-weight: 400; font-size: 0.5rem; letter-spacing: 0.12em; }
  .estudio-mini .m-maquina span { padding: 2px 5px; background: #FFFFFF; font-size: 0.75rem; }
  /* O livro ao lado, com o estúdio ligado: cada parte toca-se, a parte em edição sublinha-se, espreitar tracejado. */
  .tema-livro.is-estudio [data-livro-zona], .tema-livro.is-estudio .photo-slot { cursor: pointer; }
  .tema-livro, .tema-livro .reader-card { transition: background-color 0.3s, color 0.3s; }
  .tema-livro [data-livro-zona], .tema-livro .photo-slot > .photo { transition: outline-color 0.25s; outline: 2px solid transparent; outline-offset: 4px; }
  .tema-livro[data-foco="capa"] [data-livro-zona="capa"],
  .tema-livro[data-foco="nota"] [data-livro-zona="nota"],
  .tema-livro[data-foco="foto"] .photo-slot > .photo { outline-color: var(--stamp); }
  .tema-livro[data-espreita] { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--stamp) 70%, transparent); }
  .tema-livro.is-baralha .reader-card { animation: estudio-baralha 0.45s ease; }
  @keyframes estudio-baralha {
    30% { transform: rotate(-2deg) translateY(-4px); }
    65% { transform: rotate(1.5deg); }
  }
  @media (prefers-reduced-motion: reduce) {
    .estudio-opt, .estudio-dot, .estudio-mini, .tema-livro, .tema-livro .reader-card { transition: none; }
    .estudio-opt:hover, .estudio-swatch:hover .estudio-dot { transform: none; }
    .tema-livro.is-baralha .reader-card { animation: none; }
  }
  /* Um cartão decidido na Revisão ou no Feed sai a desvanecer-se, enquanto o servidor grava. */
  .is-saida { opacity: 0; transform: scale(0.97); pointer-events: none; transition: opacity 0.16s ease, transform 0.16s ease; }
  @media (prefers-reduced-motion: reduce) { .is-saida { transform: none; transition: none; } }
  .ficha-voice { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 0; }
  .ficha-voice .field { flex: 1 1 16rem; }
  .ficha-voice .secondary { flex: none; width: auto; min-height: 46px; padding: 0 22px; }
  .piece-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .piece-copy { display: inline-flex; align-items: center; text-decoration: none; min-height: 36px; padding: 0 14px; border: 1px solid var(--control); border-radius: 999px; background: var(--white); font: 500 0.875rem "Instrument Sans", system-ui, sans-serif; color: var(--ink); cursor: pointer; }
  .piece-more summary { min-height: 44px; display: flex; align-items: center; gap: 6px; font-weight: 500; cursor: pointer; list-style: none; }
  .piece-more summary::-webkit-details-marker { display: none; }
  .piece-more summary::before { content: "+"; font-size: 1.25rem; line-height: 1; }
  .piece-more[open] summary::before { content: "−"; }
  .piece-more > form { margin-top: 8px; }
  .ficha-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
  @media (min-width: 64em) {
    .ficha-grid { grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); gap: 56px; }
  }
  .ficha-side { display: flex; flex-direction: column; }
  .ficha-section { display: flex; flex-direction: column; gap: 14px; padding: 24px 0; border-top: 1px solid var(--line); }
  .ficha-section-head h2 { margin: 0; font-size: 1.0625rem; font-weight: 600; font-family: inherit; }
  .ficha-section-head .fine { margin: 4px 0 0; }
  .ficha-section-body { display: flex; flex-direction: column; gap: 12px; }
  .ficha-section.is-danger .ficha-section-head h2 { color: #9B2C1C; }
  button.danger { min-height: 44px; padding: 0 16px; border: 1px solid #D9A79A; border-radius: 999px; background: transparent; font: 500 0.875rem "Instrument Sans", system-ui, sans-serif; color: #9B2C1C; cursor: pointer; }
  button.danger:hover { background: #9B2C1C; color: var(--surface); }
  /* O guardar da capa acompanha quem desce a página. */
  .place-map { position: relative; margin: 0; height: 12.5rem; overflow: hidden; background: #E8DDC9; box-shadow: inset 0 0 0 1px var(--line); }
  .place-map-tiles { position: absolute; width: 768px; height: 768px; }
  .place-map-tiles img { position: absolute; width: 256px; height: 256px; max-width: none; }
  .place-map-circle { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(86, 99, 58, 0.18); box-shadow: 0 0 0 2px #56633A; }
  .place-map-dot { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; transform: translate(-50%, -50%); border-radius: 50%; background: #56633A; box-shadow: 0 0 0 3px var(--surface); }
  .place-map figcaption { position: absolute; right: 0; bottom: 0; padding: 2px 6px; background: rgba(255, 252, 247, 0.85); font-size: 0.6875rem; color: var(--body); }
  .radius-field { gap: 10px; }
  .radius-slider {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
  }
  .radius-slider input[type="range"] {
    width: 100%;
    min-height: 44px;
    margin: 0;
    accent-color: var(--ink);
  }
  .radius-slider output {
    min-width: 4.5rem;
    text-align: right;
    font: 600 0.9375rem "Instrument Sans", system-ui, sans-serif;
    color: var(--ink);
    white-space: nowrap;
  }
  .savebar {
    position: sticky;
    bottom: 16px;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 8px 8px 8px 20px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--surface);
    box-shadow: 0 12px 28px rgba(42, 28, 19, 0.28);
  }
  .savebar[hidden] { display: none; }
  .savebar-text { flex: 1 1 12rem; font-size: 0.9375rem; }
  .savebar-discard { min-height: 40px; padding: 0 16px; border: 1px solid color-mix(in srgb, var(--surface) 50%, transparent); border-radius: 999px; background: transparent; font: 600 0.875rem "Instrument Sans", system-ui, sans-serif; color: var(--surface); cursor: pointer; }
  .savebar .primary { min-height: 40px; width: auto; padding: 0 20px; background: var(--surface); color: var(--ink); }
  .house-sheet {
    background: var(--surface);
    background-image: var(--grain);
    box-shadow: 0 1px 0 var(--line);
  }
  .house-sheet summary {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 16px;
    cursor: pointer;
    list-style: none;
  }
  .house-sheet summary::-webkit-details-marker { display: none; }
  .house-sheet summary .fine {
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.6875rem;
  }
  .house-sheet summary strong {
    font-family: "Newsreader", Georgia, serif;
    font-weight: 400;
    font-size: 1.125rem;
  }
  .house-sheet-body { display: flex; flex-direction: column; gap: 12px; padding: 0 16px 16px; }
  .house-sheet textarea[name="frase"] { min-height: 4.6rem; resize: vertical; }
  .piece { display: flex; flex-direction: column; gap: 8px; margin: 0; }
  .piece-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
  }
  /* O QR da peça, para testar com a câmara ou descarregar e imprimir. */
  .piece-qr { flex: none; width: 144px; height: 144px; border-radius: 10px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--line); }
  .piece-code {
    margin: 0;
    font-family: "Newsreader", Georgia, serif;
    font-size: 2rem;
    letter-spacing: 0.18em;
    text-indent: 0.18em;
  }
  .piece-soltar {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 14px;
    border: 1.5px solid #D9A79A;
    border-radius: 999px;
    background: transparent;
    font: 500 0.8125rem "Instrument Sans", system-ui, sans-serif;
    color: #9B2C1C;
    cursor: pointer;
  }
  .piece-soltar:hover { background: #9B2C1C; color: var(--surface); }
  .piece-url { word-break: break-all; }
  .confirm-dialog {
    width: min(22rem, calc(100vw - 2rem));
    margin: auto;
    padding: 24px;
    border: 1.5px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 18px 40px -24px rgba(42, 28, 19, 0.55);
  }
  .confirm-dialog::backdrop { background: rgba(42, 28, 19, 0.45); }
  .confirm-dialog h3 {
    margin: 0 0 10px;
    font-family: "Newsreader", Georgia, serif;
    font-size: 1.5rem;
    font-weight: 400;
  }
  .confirm-dialog .copy { margin: 0 0 20px; }
  .confirm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
  }
  .confirm-actions .secondary,
  .confirm-actions .danger {
    min-height: 44px;
    padding: 0 16px;
  }
  .code-boxes-field { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
  .code-boxes-field legend { padding: 0; margin-bottom: 8px; }
  .code-boxes {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 2.75rem));
    gap: 8px;
  }
  .code-box,
  .field .code-box {
    width: 100%;
    min-height: 2.75rem;
    margin: 0;
    padding: 0;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    font-family: "Newsreader", Georgia, serif;
    font-size: 1.5rem;
    letter-spacing: 0;
    text-align: center;
    text-transform: uppercase;
  }
  .code-box:focus {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
  }
  .house-where .geo-extra { display: none; }
  .house-where:has(input[name="filtro"][value="1"]:checked) .geo-extra {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .accent-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; border: 0; }
  .accent-grid legend { font-size: 0.8125rem; font-weight: 600; margin-bottom: 8px; }
  .accent-choice {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 12px;
    border: 1.5px solid var(--line);
    background: var(--surface);
  }
  .accent-choice input { position: absolute; opacity: 0; }
  .accent-choice:has(:checked) { border-color: var(--ink); background: var(--featured); font-weight: 600; }
  .accent-choice:has(:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
  .accent-choice span:last-child { font-size: 0.8125rem; }
  .swatch { width: 22px; height: 22px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(42, 28, 19, 0.25); }
  .ficha-photo { margin: 0; width: auto; max-width: 100%; max-height: 14rem; }
  /*
   * A Revisão: a caixa de entrada da casa. Cada pensamento aparece como a nota do baralho,
   * em grelha, com Recusar e Aprovar por baixo. Na ficha só fica o resumo.
   */
  .app-bar { display: flex; align-items: center; gap: 12px; padding: 14px 0 4px; }
  .app-back { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); background: var(--surface); color: var(--ink); text-decoration: none; }
  .app-back:hover { background: var(--featured); }
  .app-back:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .app-mark { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--curation); color: var(--on-action); }
  .app-name { display: flex; flex-direction: column; font-family: "Newsreader", Georgia, serif; font-size: 1.375rem; font-weight: 600; line-height: 1.1; color: var(--ink); }
  .app-name small { font-family: inherit; font-size: 0.75rem; font-weight: 400; color: var(--muted); }
  .house-nav { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
  .house-nav a { display: inline-flex; flex: none; white-space: nowrap; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; color: var(--muted); font-size: 0.9375rem; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
  .house-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom: 3px solid var(--curation); }
  .house-nav a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .house-nav-count { min-width: 1.5rem; padding: 1px 8px; border-radius: 999px; background: var(--stamp); color: var(--on-action); font-size: 0.75rem; font-weight: 600; text-align: center; }
  /* App de admin da plataforma (#100): lista e edição em /organizations. */
  .platform-support-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
  .platform-support-item {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 12px; padding: 12px 0; border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  }
  /*
   * Plataforma: lista e detalhe lado a lado. Em ecrã estreito mostra-se só um, pelo endereço.
   */
  /*
   * O botão da conta: avatar, nome, organização e o menu com terminar sessão.
   */
  .org-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .org-top-brand { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; color: var(--muted); text-decoration: none; }
  a.org-top-brand:hover { color: var(--ink); }
  .org-members-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; }
  .org-search { display: block; margin: 0 0 12px; }
  .org-search input { box-sizing: border-box; width: min(20rem, 100%); min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); background: var(--surface); font: inherit; font-size: 0.9375rem; color: var(--ink); }
  .org-people > li[hidden] { display: none; }
  .org-members-actions { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; }
  .org-members-head > .stack { flex: 1 1 22rem; }
  .org-meter-bars span.is-pending { background: #C9A96E; }
  button.org-invite-open { width: auto; min-width: 9rem; flex: 0 0 auto; }
  .org-subtabs-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 20px; border-bottom: 1px solid var(--line); }
  .org-subtabs { display: flex; gap: 20px; }
  .org-subtabs-row .org-search { margin: 0 0 8px auto; }
  .org-you { margin-left: 8px; padding: 1px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font-size: 0.75rem; font-weight: 500; color: var(--muted); }
  [data-org-members] .fine { margin-top: 14px; }
  .org-subtabs a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 0; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; font-size: 0.9375rem; }
  .org-subtabs a[aria-current] { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
  .org-count { font-size: 0.75rem; padding: 1px 8px; border-radius: 999px; background: var(--featured); color: var(--ink); }
  .org-count.is-pending { background: #F3E6CF; color: #6B4413; font-weight: 600; }
  .org-empty { margin: 0; padding: 20px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); }
  .org-invite-dialog { box-sizing: border-box; width: min(35rem, calc(100vw - 32px)); padding: 24px 26px; border: 0; border-radius: 18px; background: var(--surface); color: var(--ink); box-shadow: 0 30px 70px rgba(42, 28, 19, 0.35); }
  .org-invite-dialog::backdrop { background: rgba(42, 28, 19, 0.45); }
  .org-invite-dialog form { display: flex; flex-direction: column; gap: 16px; }
  .org-invite-top { display: flex; align-items: flex-start; gap: 12px; }
  .org-invite-top .stack { flex: 1; }
  .org-invite-top h2 { margin: 0; }
  .org-invite-close { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--ink); font-size: 1.5rem; cursor: pointer; }
  .org-invite-dialog textarea { box-sizing: border-box; width: 100%; padding: 10px 12px; border: 0; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); background: var(--surface); font: inherit; color: var(--ink); }
  .org-invite-dialog [data-invite-error] { margin: 0; }
  .org-invite-dialog [data-invite-error][hidden] { display: none; }
  .org-invite-dialog .confirm-actions .primary,
  .org-invite-dialog .confirm-actions .secondary {
    width: auto;
    min-height: 44px;
    padding: 0 16px;
  }
  .org-invite-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }
  .org-invite-spinner {
    box-sizing: border-box;
    width: 1.05em;
    height: 1.05em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    flex: none;
    animation: org-invite-spin 0.7s linear infinite;
  }
  .org-invite-spinner[hidden] { display: none; }
  @keyframes org-invite-spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) {
    .org-invite-spinner { animation: none; opacity: 0.85; border-right-color: currentColor; }
  }
  .org-top-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
  .org-top-sep { color: var(--line); }
  .org-switch { position: relative; }
  .org-switch > summary { list-style: none; }
  .org-switch > summary::-webkit-details-marker { display: none; }
  .org-switch-mark { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--featured); font-family: var(--serif, Georgia, serif); font-size: 0.9375rem; font-weight: 500; }
  .org-switch-button, .org-switch-static { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
  .org-switch-button { padding: 0 12px 0 8px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; }
  .org-switch-button:hover, .org-switch[open] .org-switch-button { background: var(--featured); }
  .org-switch-button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .org-switch-name { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .org-switch-panel { position: absolute; left: 0; top: calc(100% + 8px); z-index: 30; box-sizing: border-box; width: min(21rem, calc(100vw - 32px)); padding: 8px; display: flex; flex-direction: column; gap: 4px; background: var(--surface); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -20px rgba(42, 28, 19, 0.5); }
  .org-switch-title { margin: 0; padding: 8px 10px 4px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
  .org-switch-search { box-sizing: border-box; width: 100%; min-height: 44px; padding: 0 12px; border-radius: 10px; border: 0; box-shadow: inset 0 0 0 1px var(--line); background: var(--bg, transparent); font: inherit; font-size: 0.875rem; color: var(--ink); }
  .org-switch-list { list-style: none; margin: 0; padding: 0; max-height: 17rem; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
  .org-switch-list li[hidden] { display: none; }
  .org-switch-list a { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 10px; border-radius: 10px; color: var(--ink); text-decoration: none; }
  .org-switch-list a:hover, .org-switch-list a[aria-current] { background: var(--featured); }
  .org-switch-list .user-menu-text { flex: 1; }
  @media (max-width: 30em) { .org-top-brand, .org-top-sep { display: none; } }
  .user-menu { position: relative; margin-left: auto; }
  .user-menu > summary { list-style: none; }
  .user-menu > summary::-webkit-details-marker { display: none; }
  .user-menu-button { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 12px 4px 5px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); cursor: pointer; }
  .user-menu-button:hover { background: var(--featured); }
  .user-menu-button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .user-avatar { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: var(--ink); color: var(--on-action); font-size: 0.8125rem; font-weight: 600; }
  .user-avatar.is-large { width: 44px; height: 44px; font-size: 0.9375rem; }
  .user-menu-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; text-align: left; }
  .user-menu-text strong { font-size: 0.875rem; font-weight: 600; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .user-menu-text span { font-size: 0.75rem; color: var(--muted); max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .user-menu-chevron { flex: 0 0 auto; color: var(--muted); transition: rotate 0.15s; }
  .user-menu[open] .user-menu-chevron { rotate: 180deg; }
  .user-menu-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; box-sizing: border-box; min-width: 17rem; padding: 12px; display: flex; flex-direction: column; gap: 10px; background: var(--surface); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -20px rgba(42, 28, 19, 0.5); }
  .user-menu-who { display: flex; align-items: center; gap: 12px; padding: 4px 4px 10px; border-bottom: 1px solid var(--line); }
  .user-menu-panel form { margin: 0; }
  .user-menu-signout { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font: inherit; font-size: 0.9375rem; font-weight: 500; text-align: left; cursor: pointer; }
  .user-menu-signout:hover { background: var(--featured); }
  .user-menu-signout:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  @media (max-width: 30em) {
    .user-menu-button .user-menu-text, .user-menu-button .user-menu-chevron { display: none; }
    .user-menu-button { padding: 5px; }
    .user-menu-panel { min-width: min(17rem, calc(100vw - 32px)); }
  }
  /*
   * App da organização: as três páginas partilham a largura e o cabeçalho.
   * Aplicações em cartões, Organização com índice e Membros com pessoas.
   */
  .org-page > .house-nav { margin-top: 0; }
  /* Tabs MPA: feedback imediato no clique; View Transition no browser que suporte. */
  @view-transition { navigation: auto; }
  .org-page[data-nav-pending] > :not(.house-nav):not(script) {
    opacity: 0.55;
    transition: opacity 120ms ease;
    pointer-events: none;
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 140ms;
  }
  .org-prompt { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 16px 20px; background: var(--featured); border-radius: 14px; }
  .org-prompt div { flex: 1 1 18rem; display: flex; flex-direction: column; gap: 2px; }
  .org-prompt span { font-size: 0.8125rem; line-height: 1.45; color: var(--body); }
  .org-prompt .primary { min-height: 44px; padding: 0 20px; font-size: 0.875rem; text-decoration: none; }
  .org-feature-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 16px; }
  .org-feature-card { display: flex; flex-direction: column; gap: 12px; min-height: 10.5rem; box-sizing: border-box; padding: 20px; background: var(--surface); border: 1px solid #CDBFA6; border-radius: 14px; color: var(--ink); text-decoration: none; }
  .org-feature-card:hover { background: var(--featured); border-color: var(--control); }
  .org-feature-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .org-feature-head { display: flex; align-items: center; gap: 10px; }
  .org-feature-head .pa-badge { margin-left: auto; }
  .org-feature-title { font-size: 1.125rem; font-weight: 600; color: var(--ink); }
  .org-feature-blurb { font-size: 0.875rem; line-height: 1.5; color: var(--body); }
  .org-feature-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
  .org-feature-stats span { padding: 4px 10px; border-radius: 999px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); font-size: 0.75rem; color: var(--body); }
  .org-feature-stats span.is-attention { background: #F3E6CF; box-shadow: none; color: #6B4413; font-weight: 600; }
  /* Aceitar convite: o que o convite dá, em linhas curtas. */
  .invite-facts { margin: 0; display: flex; flex-direction: column; background: var(--surface); border: 1px solid #CDBFA6; border-radius: 14px; }
  .invite-facts > div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 18px; font-size: 0.9375rem; }
  .invite-facts > div + div { border-top: 1px solid var(--line); }
  .invite-facts dt { color: var(--body); }
  .invite-facts dd { margin: 0; text-align: right; font-weight: 600; overflow-wrap: anywhere; }
  .invite-later { align-self: center; min-height: 44px; display: inline-flex; align-items: center; }
  /* Início: o que pede atenção sobe ao topo. */
  .org-attention { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--note-amarelo, #F6E7A6); box-shadow: inset 0 0 0 1px rgba(122, 75, 46, 0.25); color: var(--ink); text-decoration: none; }
  .org-attention:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
  .org-attention:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .org-attention-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--stamp); }
  .org-attention-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .org-attention-text strong { font-size: 1rem; }
  .org-attention-text span { font-size: 0.8125rem; color: var(--body); }
  /* Equipe: o convite pendente é uma linha da lista, com a etiqueta amarela. */
  .org-person.is-pending { background: #FBF3D6; }
  .org-role.is-pending { background: var(--note-amarelo, #F6E7A6); color: #4A3523; }
  /* Confirmação de uma vez: baixo à esquerda, fecha sozinha. */
  .org-toast { position: fixed; left: 16px; bottom: 16px; z-index: 30; display: flex; align-items: center; gap: 12px; max-width: min(32rem, calc(100vw - 32px)); min-height: 52px; box-sizing: border-box; padding: 0 6px 0 16px; border-radius: 12px; background: var(--ink); color: var(--on-action); font-size: 0.9375rem; box-shadow: 0 12px 24px -8px rgba(42, 28, 19, 0.5); }
  .org-toast svg { flex: none; color: var(--note-amarelo, #F6E7A6); }
  .org-toast-undo { margin: 0; flex: none; }
  .org-toast-undo button { width: auto; padding: 0 12px; font-size: 0.9375rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; color: var(--note-amarelo, #F6E7A6); }
  .org-toast button { flex: none; width: 44px; height: 44px; border: 0; background: transparent; color: inherit; font-size: 1.25rem; cursor: pointer; }
  .org-switch-logo { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
  .user-menu-link { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 8px; color: var(--ink); font-size: 0.9375rem; text-decoration: none; }
  .user-menu-link:hover { background: var(--ground); }
  .user-menu-count { margin-left: auto; font-size: 0.8125rem; color: var(--muted); }
  /* Início com uma só aplicação: cartão largo, com atalhos para o que se faz mais. */
  .org-hero { display: flex; flex-wrap: wrap; gap: 24px 40px; padding: 24px; background: var(--surface); border: 1px solid #CDBFA6; border-radius: 16px; }
  .org-hero-main { flex: 1 1 18rem; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
  .org-hero-title { margin: 0; font-size: 1.375rem; font-weight: 600; font-family: inherit; }
  .org-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
  .org-hero-open { min-height: 44px; padding: 0 28px; width: auto; display: inline-flex; align-items: center; text-decoration: none; }
  .org-hero-links { flex: 1 1 16rem; display: flex; flex-direction: column; gap: 2px; padding-left: 40px; border-left: 1px solid var(--line); }
  .org-hero-links .suite-kicker { padding-bottom: 8px; }
  .org-hero-links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 14px; border-radius: 10px; color: var(--ink); font-size: 0.9375rem; text-decoration: none; }
  .org-hero-links a:hover { background: var(--ground); }
  .org-hero-links a.is-attention { background: var(--note-amarelo, #F6E7A6); }
  .org-hero-links a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  @media (max-width: 40em) { .org-hero-links { padding-left: 0; border-left: 0; padding-top: 16px; border-top: 1px solid var(--line); } }
  /* Equipe: etiquetas de aplicações, painel lateral de edição e convite inline. */
  .org-person-features { display: inline-flex; flex-wrap: wrap; gap: 6px; }
  .org-chip { padding: 3px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px #CDBFA6; font-size: 0.75rem; color: var(--body); }
  .org-chip.is-none { color: var(--muted); }
  .org-sheet { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(24rem, 100vw); height: 100dvh; max-height: none; box-sizing: border-box; padding: 24px; border: 0; border-left: 1px solid #CDBFA6; background: var(--surface); color: var(--ink); box-shadow: -16px 0 32px -16px rgba(42, 28, 19, 0.3); overflow-y: auto; }
  .org-sheet::backdrop { background: rgba(42, 28, 19, 0.35); }
  .org-sheet[open] { display: flex; flex-direction: column; gap: 20px; }
  .org-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .org-sheet-head h3 { margin: 4px 0 0; font: 400 1.625rem/1.2 "Newsreader", Georgia, serif; overflow-wrap: anywhere; }
  .org-sheet .org-edit-form { display: flex; flex-direction: column; gap: 18px; }
  .org-sheet-remove { align-self: center; min-height: 44px; }
  .org-bring { display: flex; flex-direction: column; gap: 12px; padding: 20px; border: 1.5px dashed #B8A88C; border-radius: 14px; }
  .org-bring p { margin: 0; }
  .org-bring-form { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
  .org-bring-form input[type="email"] { flex: 1 1 14rem; min-height: 48px; box-sizing: border-box; padding: 0 14px; border: 1.5px solid var(--ink); border-radius: 10px; background: #fff; font: inherit; }
  .org-bring-form .primary { min-height: 48px; width: auto; padding: 0 24px; }
  /* Seletor: o convite à frente, as organizações que já tem por baixo. */
  .suite-who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; }
  .suite-who .copy { margin: 0; }
  .suite-kicker { margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
  .suite-invite { min-height: 0; border: 2px solid var(--ink); background: var(--surface); }
  .suite-invite-kicker { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; color: var(--stamp); }
  .suite-invite-actions { display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin-top: 6px; }
  .suite-invite-actions form { margin: 0; display: flex; flex-direction: column; }
  .suite-invite-actions .primary { width: 100%; }
  .suite-invite-actions .text-button { align-self: center; min-height: 44px; }
  .suite-org { min-height: 0; gap: 6px; }
  .org-feature-go { display: inline-flex; align-items: center; justify-content: flex-start; gap: 6px; min-height: 0; padding: 0; background: none; color: inherit; font-size: 0.875rem; font-weight: 600; }
  .casa-grid.org-settings-grid { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr) 18rem; gap: 40px; align-items: start; }
  .org-index { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 2px; }
  .org-index-group { padding: 12px 12px 6px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
  .org-index-group:first-child { padding-top: 0; }
  .org-index a { padding: 10px 12px; border-radius: 10px; color: var(--body); font-size: 0.875rem; text-decoration: none; }
  .org-index a:hover { background: var(--featured); color: var(--ink); }
  .org-index a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .org-settings-main { display: flex; flex-direction: column; gap: 32px; min-width: 0; max-width: 40rem; }
  .org-settings-grid .casa-preview { position: sticky; top: 20px; flex: none; max-width: none; }
  .org-savebar { position: sticky; bottom: 0; display: flex; align-items: center; gap: 14px; padding: 12px 0; background: var(--ground); box-shadow: 0 -1px 0 var(--line); }
  .org-savebar .fine { flex: 1; margin: 0; }
  .org-savebar .primary { width: auto; min-height: 48px; padding: 0 26px; }
  .org-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; background: var(--surface); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
  .org-card h2 { margin: 0; font-family: inherit; font-size: 1.125rem; font-weight: 600; }
  .org-card .fine, .org-card p { margin: 0; }
  .org-card .secondary { align-self: flex-start; min-height: 46px; padding: 0 20px; font-size: 0.875rem; text-decoration: none; display: inline-flex; width: auto; }
  .org-card.is-danger { box-shadow: inset 0 0 0 1px #C9846A; }
  .org-card.is-danger h2 { color: #9B2C1C; }
  .org-card form { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
  .org-card .field { width: 100%; max-width: 22rem; font-weight: 600; }
  .org-members-grid { display: flex; flex-wrap: wrap; gap: 32px 40px; align-items: flex-start; }
  .org-team { flex: 999 1 30rem; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
  .org-team-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
  .org-team-head h2 { margin: 0; font-family: inherit; font-size: 1.125rem; font-weight: 600; }
  .org-meter { display: inline-flex; align-items: center; gap: 10px; font-size: 0.8125rem; color: var(--body); }
  .org-meter-bars { display: inline-flex; gap: 3px; }
  .org-meter-bars span { width: 22px; height: 8px; border-radius: 4px; background: var(--line); }
  .org-meter-bars span.is-on { background: var(--ink); }
  .org-people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
  .org-person { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; background: var(--surface); border: 1px solid #CDBFA6; border-radius: 12px; }
  .org-person-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
  .user-avatar.is-soft { background: var(--tape); color: var(--ink); }
  .org-person-text { flex: 1 1 12rem; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .org-person-text strong { font-size: 0.9375rem; font-weight: 600; overflow-wrap: anywhere; }
  .org-person-text span { font-size: 0.8125rem; color: var(--muted); overflow-wrap: anywhere; }
  .org-person-text code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.75rem; }
  .org-role { padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
  .org-role.is-owner { background: var(--ink); color: var(--on-action); }
  .org-role.is-admin { background: #E6E9D8; color: #3D4727; }
  .org-role.is-member { background: var(--featured); color: var(--body); }
  .org-person-features { padding: 3px 10px; border-radius: 999px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); font-size: 0.75rem; color: var(--body); }
  .org-person-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 12px; padding-top: 10px; border-top: 1px solid var(--archive-line); }
  .org-person-actions form { margin: 0; }
  .org-edit { flex: 1 1 18rem; }
  .org-edit summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-size: 0.8125rem; font-weight: 500; list-style: none; }
  .org-edit summary::-webkit-details-marker { display: none; }
  .org-edit summary:focus-visible, .org-remove:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .org-edit-form { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 14px 0 4px; }
  .org-edit-form .secondary { min-height: 44px; padding: 0 20px; width: auto; }
  .org-remove { min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: #6E2A16; font: inherit; font-size: 0.8125rem; font-weight: 500; cursor: pointer; }
  .org-full { margin: 0; padding: 12px 16px; border-radius: 10px; background: #F3E6CF; box-shadow: inset 0 0 0 1px #D9B98A; color: #6B4413; font-size: 0.875rem; }
  .org-invite { flex: 1 1 20rem; max-width: 24rem; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; padding: 20px; background: var(--surface); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); position: sticky; top: 20px; }
  .org-invite h2 { margin: 0; font-family: inherit; font-size: 1.125rem; font-weight: 600; }
  .org-invite .fine { margin: 0; }
  .org-invite .primary { min-height: 50px; }
  .org-roles, .org-features { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
  .org-roles legend, .org-features legend { padding: 0; margin-bottom: 6px; font-size: 0.875rem; font-weight: 600; }
  .org-role-choice { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
  .org-role-choice:has(:checked) { border-color: var(--ink); }
  .org-role-choice input { margin-top: 3px; accent-color: var(--ink); }
  .org-role-choice span { display: flex; flex-direction: column; font-size: 0.75rem; line-height: 1.4; color: var(--muted); }
  .org-role-choice strong { font-size: 0.875rem; color: var(--ink); }
  @media (max-width: 64em) {
    .casa-grid.org-settings-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .org-index { position: static; flex-direction: row; overflow-x: auto; gap: 6px; scrollbar-width: none; }
    .org-index-group { display: none; }
    .org-index a { flex: 0 0 auto; min-height: 40px; display: inline-flex; align-items: center; border: 1px solid var(--control); }
    .org-settings-grid .casa-preview { position: static; order: -1; }
    .org-invite { position: static; max-width: none; }
  }
  .pa { width: min(100%, 82rem); min-height: 100dvh; margin: 0 auto; padding: 0 20px 22px; box-sizing: border-box; display: flex; flex-direction: column; gap: 0; }
  .pa-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .pa-brand { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; color: var(--muted); }
  .pa-nav { display: flex; align-items: center; gap: 4px; margin-right: auto; margin-left: 12px; }
  .pa-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 999px; color: var(--muted); font-size: 0.875rem; font-weight: 500; text-decoration: none; }
  .pa-nav a:hover { color: var(--ink); }
  .pa-nav a[aria-current="page"] { background: var(--featured); color: var(--ink); font-weight: 600; }
  .pa-nav a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .pa-wl-body { flex: 1; padding: 22px 0 24px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  .pa-wl-head h1 { margin: 0; font-size: 2rem; line-height: 1; }
  .pa-wl-head .fine { margin: 6px 0 0; text-align: left; }
  .pa-summary.pa-wl-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pa-wl-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
  .pa-wl-filters .pa-search { flex: 1 1 16rem; }
  .pa-wl-select { flex: 0 1 11rem; margin: 0; }
  .pa-wl-select span { font-size: 0.75rem; color: var(--muted); }
  .pa-wl-select select { width: 100%; min-height: 46px; padding: 0 10px; border: 1.5px solid var(--control); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: 0.9375rem; box-sizing: border-box; }
  .pa-wl-filter-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
  .pa-wl-filter-actions .secondary { min-height: 46px; width: auto; padding: 0 20px; }
  .pa-wl-clear, .pa-wl-export { color: var(--ink); font-size: 0.875rem; font-weight: 500; }
  .pa-wl-count { margin: 0; text-align: left; }
  .pa-wl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
  .pa-wl-item { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px 20px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
  .pa-wl-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .pa-wl-main strong { font-size: 1rem; font-weight: 600; overflow-wrap: anywhere; }
  .pa-wl-venue { font-size: 0.9375rem; color: var(--body); overflow-wrap: anywhere; }
  .pa-wl-mail { font-size: 0.875rem; color: var(--ink); overflow-wrap: anywhere; }
  .pa-wl-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; align-content: flex-start; gap: 6px 12px; font-size: 0.8125rem; color: var(--muted); }
  .pa-wl-status { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
  .pa-wl-status.is-new { background: #F3E3D6; color: #7A3E1F; }
  .pa-wl-status.is-contacted { background: #E6E9D8; color: #3D4727; }
  .pa-wl-lang { padding: 2px 8px; border: 1px solid var(--control); border-radius: 6px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; }
  .pa-wl-message { grid-column: 1 / -1; }
  .pa-wl-message summary { cursor: pointer; font-size: 0.875rem; font-weight: 600; min-height: 32px; }
  .pa-wl-message p { margin: 6px 0 0; font-size: 0.9375rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
  .pa-wl-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 10px; }
  .pa-wl-actions .secondary { min-height: 44px; width: auto; padding: 0 16px; font-size: 0.875rem; }
  .pa-wl-pages { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; }
  .pa-wl-pages a { color: var(--ink); font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; }
  @media (max-width: 40rem) {
    .pa-top { flex-wrap: wrap; }
    .pa-nav { order: 3; flex: 1 0 100%; margin: 0; overflow-x: auto; }
    .pa-summary.pa-wl-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pa-wl-item { grid-template-columns: minmax(0, 1fr); }
    .pa-wl-meta { justify-content: flex-start; }
  }
  .pa-shell { display: flex; align-items: flex-start; gap: 0; flex: 1; }
  .pa-master { flex: 0 0 26rem; box-sizing: border-box; padding: 22px 20px 24px 0; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; min-height: 30rem; }
  .pa-master-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .pa-master-head h1 { margin: 0; font-size: 2rem; line-height: 1; }
  .pa-new { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 10px; background: var(--ink); color: var(--on-action); font-size: 0.875rem; font-weight: 600; text-decoration: none; }
  .pa-new:focus-visible, .pa-row:focus-visible, .pa-open:focus-visible, .pa-back:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .pa-controls { display: flex; flex-direction: column; gap: 10px; }
  .pa-search input { width: 100%; min-height: 46px; padding: 0 14px; border: 1.5px solid var(--control); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: 1rem; box-sizing: border-box; }
  .pa-filters { display: flex; flex-wrap: nowrap; gap: 4px; }
  .pa-filters button { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 5px; min-height: 40px; padding: 0 10px; border: 1px solid var(--control); border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-size: 0.8125rem; font-weight: 500; white-space: nowrap; cursor: pointer; }
  .pa-filters button span { opacity: 0.8; }
  .pa-filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-action); }
  .pa-filters button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .pa-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
  .pa-list li[hidden] { display: none; }
  .pa-row { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 12px; border: 1px solid transparent; background: transparent; border-radius: 12px; background: var(--surface); color: var(--ink); text-decoration: none; }
  .pa-row:hover { background: var(--featured); }
  .pa-avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; background: var(--featured); color: var(--ink); display: grid; place-items: center; font-family: "Newsreader", Georgia, serif; font-weight: 600; font-size: 1.125rem; }
  .pa-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
  .pa-summary > div { padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
  .pa-summary dt { font-size: 0.75rem; color: var(--muted); margin: 0; }
  .pa-summary dd { margin: 2px 0 0; font-family: "Newsreader", Georgia, serif; font-size: 1.625rem; line-height: 1.1; color: var(--ink); }
  .pa-summary .is-warn dd { color: var(--stamp); }
  .pa-row[aria-current="page"] { background: var(--surface); border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
  .pa-row-go { display: none; }
  .pa-row:hover .pa-row-go, .pa-row[aria-current="page"] .pa-row-go { color: var(--ink); }
  .pa-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .pa-row-main strong { font-size: 0.9375rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pa-row-main code, .pa-facts code, .pa-title + * code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8125rem; color: var(--muted); }
  .pa-badge { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
  .pa-badge-mark { width: 8px; height: 8px; display: inline-block; }
  .pa-badge.is-ativa { background: #E6E9D8; color: #3D4727; }
  .pa-badge.is-ativa .pa-badge-mark { background: #56633A; border-radius: 50%; }
  .pa-badge.is-pendente { background: #E8EEF3; color: #2F4458; }
  .pa-badge.is-pendente .pa-badge-mark { background: #4A6B85; border-radius: 50%; border: 1.5px solid transparent; box-shadow: inset 0 0 0 1.5px #E8EEF3; }
  .pa-badge.is-suspensa { background: #E8E2D8; color: #4A3628; }
  .pa-badge.is-suspensa .pa-badge-mark { background: #6A5242; border-radius: 1px; }
  .pa-badge.is-atraso { background: #F3E6CF; color: #6B4413; }
  .pa-badge.is-atraso .pa-badge-mark { background: #B5791F; border-radius: 2px; rotate: 45deg; }
  .pa-owner-invite { margin-top: 1rem; padding: 0.85rem 1rem; background: #F3F1EC; border-left: 3px solid #4A6B85; }
  .pa-owner-invite .house-actions { margin-top: 0.6rem; }
  #handle-estado.is-unavailable { color: #8B2E1F; font-weight: 600; }
  #handle-estado.is-available { color: #3D4727; }
  .pa-empty { display: flex; flex-direction: column; gap: 6px; padding: 16px; background: var(--surface); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); font-size: 0.875rem; color: var(--body); }
  .pa-none { margin: 0; padding: 14px 16px; background: var(--surface); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); font-size: 0.875rem; line-height: 1.5; color: var(--body); }
  .pa-none[hidden] { display: none; }
  .pa-none button { border: 0; background: transparent; color: var(--ink); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 32px; }
  .pa-detail { flex: 1; min-width: 0; box-sizing: border-box; padding: 32px 0 40px 44px; display: flex; flex-direction: column; gap: 20px; }
  .pa-placeholder { padding: 48px 0; font-family: "Newsreader", Georgia, serif; font-size: 1.375rem; line-height: 1.4; color: var(--body); max-width: 32rem; }
  .pa-placeholder p { margin: 0; }
  .pa-back { display: none; align-items: center; min-height: 44px; color: var(--muted); font-size: 0.875rem; text-decoration: none; }
  .pa-head { display: flex; flex-direction: column; gap: 12px; }
  .pa-head-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
  .pa-title { margin: 0; font-family: "Newsreader", Georgia, serif; font-size: 2.5rem; font-weight: 400; line-height: 1.05; }
  .pa-open { margin-left: auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--ink); border-radius: 10px; color: var(--ink); font-size: 0.875rem; font-weight: 500; text-decoration: none; }
  .pa-facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 12px 24px; padding: 16px 18px; background: var(--surface); border-radius: 12px; border: 1px solid var(--line); font-size: 0.8125rem; }
  .pa-facts dt { color: var(--muted); margin-bottom: 2px; }
  .pa-facts dd { margin: 0; overflow-wrap: anywhere; }
  .pa-blocked { margin: 0; padding: 12px 16px; border-radius: 10px; background: #F3E6CF; box-shadow: inset 0 0 0 1px #D9B98A; color: #6B4413; font-size: 0.875rem; line-height: 1.45; }
  .pa-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--line); }
  .pa-tabs[hidden], .pa-panel[hidden], .pa-controls[hidden] { display: none; }
  .pa-tabs button { min-height: 46px; padding: 0 6px 2px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; color: var(--muted); font: inherit; font-size: 0.9375rem; font-weight: 500; cursor: pointer; white-space: nowrap; }
  .pa-tabs button[aria-selected="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
  .pa-tabs button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .pa-panel { display: flex; flex-direction: column; gap: 16px; max-width: 40rem; }
  .pa-panel-title { margin: 0; font-size: 1.0625rem; font-weight: 600; font-family: inherit; }
  .pa-form { gap: 14px; align-items: stretch; text-align: left; }
  .pa-detail .fine { text-align: left; }
  .pa-form .field, .pa-support-form .field { font-weight: 600; }
  .pa-form .fine { margin: 0; }
  .pa-features { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
  .pa-features legend { padding: 0; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; }
  .pa-support-form { display: grid; grid-template-columns: minmax(0, 1fr) 8rem auto; gap: 12px; align-items: end; }
  .pa-support-form .secondary { min-height: 52px; padding: 0 20px; }
  .pa-grants { margin-top: 0; padding: 0 16px; background: var(--surface); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); }
  .pa-grants .platform-support-item:first-child { border-top: 0; }
  .pa-grants .secondary { min-height: 40px; padding: 0 14px; font-size: 0.8125rem; }
  .pa-risk { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px 18px; background: var(--surface); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
  .pa-risk-text { flex: 1 1 16rem; display: flex; flex-direction: column; gap: 4px; }
  .pa-risk-text .fine { margin: 0; }
  .pa-risk form { margin: 0; }
  .pa-risk .secondary { min-height: 46px; padding: 0 20px; }
  .pa-danger { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 20px; border-radius: 14px; background: #FBEDE6; box-shadow: inset 0 0 0 1px #C9846A; }
  .pa-danger strong { color: #6E2A16; }
  .pa-danger .fine { margin: 0; }
  .pa-danger .field { width: 100%; max-width: 20rem; font-size: 0.8125rem; font-weight: 600; }
  .pa-danger button.danger:disabled { opacity: 0.5; cursor: not-allowed; }
  .pa-danger button.danger:not(:disabled) { background: #9B2C1C; color: var(--surface); border-color: #9B2C1C; }
  @media (max-width: 56em) {
    .pa { padding: 0 16px 22px; }
    .pa-shell { display: block; }
    .pa-master { border-right: 0; padding: 18px 0 24px; min-height: 0; }
    .pa-detail { padding: 14px 0 40px; }
    .pa[data-view="list"] .pa-detail { display: none; }
    .pa[data-view="detail"] .pa-master { display: none; }
    .pa-back { display: inline-flex; }
    .pa-tabs, .pa-filters { overflow-x: auto; scrollbar-width: none; }
    .pa-support-form { grid-template-columns: minmax(0, 1fr); }
    .pa-summary dd { font-size: 1.375rem; }
    .pa-support-form .secondary { width: 100%; }
    .pa-open { margin-left: 0; }
    .pa-title { font-size: 2rem; }
  }
  .platform-feature-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
  .platform-feature-check {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 14px 16px; background: var(--surface); border-radius: 12px;
    box-shadow: inset 0 0 0 1px var(--line); cursor: pointer;
  }
  .platform-feature-check input { margin-top: 4px; width: 1.125rem; height: 1.125rem; }
  .platform-feature-check span { display: flex; flex-direction: column; gap: 4px; }
  .platform-feature-check strong { font-size: 1.0625rem; }
  .platform-confirm { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 0.9375rem; }
  .house-actions a.primary, .house-actions a.secondary { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
  .review-filters { display: flex; flex-wrap: wrap; gap: 8px; }
  .review-filters a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--control); color: var(--ink); font-size: 0.875rem; font-weight: 500; text-decoration: none; }
  .review-filters a span { font-size: 0.75rem; opacity: 0.85; }
  .review-filters a[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-action); }
  .review-filters a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .review-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 32px 24px; align-items: start; }
  .review-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
  .review-where { margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
  .review-where a { color: var(--muted); text-decoration: none; }
  .review-where a:hover { color: var(--ink); }
  .review-decide { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .review-decide form { margin: 0; }
  .review-decide .primary, .review-decide .secondary { min-height: 46px; padding: 0 16px; font-size: 0.9375rem; width: 100%; }
  .review-care { align-self: stretch; }
  /* No telemóvel (quem aprova está muitas vezes ao balcão): um cartão por ecrã e os botões ao alcance do polegar. */
  @media (max-width: 40em) {
    .review-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .review-decide { grid-template-columns: 1fr 1.4fr; gap: 10px; position: sticky; bottom: 0; z-index: 2; margin-inline: -4px; padding: 12px 4px calc(12px + env(safe-area-inset-bottom)); background: var(--ground); box-shadow: 0 -1px 0 var(--line); }
    .review-decide .primary, .review-decide .secondary { min-height: 56px; font-size: 1.0625rem; border-radius: 14px; }
  }
  .review-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 56px 24px; background: var(--surface); border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); text-align: center; }
  .review-empty h2 { margin: 0; font-size: 2rem; }
  .review-empty .secondary { margin-top: 8px; padding: 0 20px; min-height: 44px; }
  /* Feed: cartões da visita + acções de curadoria por baixo (não lista admin). */
  .feed-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    align-items: flex-end;
    margin-bottom: 28px;
  }
  .feed-place {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--muted);
  }
  .feed-place select {
    min-width: 200px;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--ink);
    background: var(--surface);
    font: inherit;
    color: var(--ink);
  }
  .feed-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-size: 0.875rem;
    color: var(--body);
  }
  .feed-count { margin-left: auto; font-size: 0.8125rem; color: var(--muted); }
  .feed-deck {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 36px 28px;
    align-items: start;
  }
  .feed-card { display: flex; flex-direction: column; gap: 12px; align-items: center; min-width: 0; }
  .feed-badge {
    margin: 0;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--stamp);
  }
  .feed-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
  .feed-actions form { margin: 0; }
  .feed-actions button {
    font: inherit;
    font-size: 0.8125rem;
    min-height: 40px;
    padding: 7px 12px;
    border: 1px solid var(--ink);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
  }
  .feed-actions button.is-on { background: var(--ink); color: var(--on-action); }
  .feed-actions button.ghost {
    border-color: transparent;
    background: transparent;
    color: var(--muted);
    text-decoration: underline;
  }
  .feed-card.is-off .reader-card { opacity: 0.45; filter: grayscale(0.35); }
  .feed-card.is-destaque .reader-card {
    outline: 2px solid color-mix(in srgb, var(--stamp) 55%, transparent);
    outline-offset: 6px;
  }
  .house-feed .reader-card {
    width: min(100%, 320px);
    min-height: 420px;
    margin: 0 auto;
    padding: 56px 16px 40px;
    gap: 14px;
    align-items: center;
    background-color: color-mix(in srgb, var(--surface) 30%, #D6C09A);
    background-image: var(--kraft-tex);
    box-shadow: 0 1px 1px rgba(42, 28, 19, 0.08), 0 22px 20px -16px rgba(42, 28, 19, 0.5);
    rotate: -0.8deg;
  }
  .house-feed .reader-card[data-tilt="r"] { rotate: 0.7deg; }
  .house-feed .reader-card.is-team { background-color: var(--featured); }
  .house-feed .reader-card::before { display: none; }
  .house-feed .postmark { top: 12px; right: 12px; width: 3.25rem; height: 3.25rem; font-size: 0.5rem; }
  .house-feed .photo-slot { position: relative; display: flex; justify-content: center; width: 100%; }
  .house-feed .photo-slot::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: -8px;
    left: calc(50% - 36px);
    width: 72px;
    height: 20px;
    background: var(--photo-tape);
    rotate: -3deg;
    box-shadow: var(--photo-tape-edge);
  }
  .house-feed .photo-slot > .photo {
    box-sizing: content-box;
    width: min(100% - 40px, 220px);
    max-height: 16rem;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    padding: 14px 14px 50px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(42, 28, 19, 0.18), 0 10px 18px -10px rgba(42, 28, 19, 0.4);
    rotate: 1.2deg;
  }
  .house-feed .reader-card[data-tilt="r"] .photo-slot > .photo { rotate: -1.1deg; }
  .house-feed .memory-actions {
    position: absolute;
    right: 8px;
    bottom: 6px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: var(--muted);
    font-size: 1.25rem;
    line-height: 1;
    pointer-events: none;
  }
  .queue-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 16px 20px; background: var(--surface); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
  .queue-summary-text { flex: 1 1 16rem; min-width: 0; }
  .queue-summary h2 { margin: 0; font-family: inherit; font-size: 1.0625rem; font-weight: 600; }
  .queue-summary .fine { margin: 4px 0 0; }
  .queue-summary-go { min-height: 44px; padding: 0 20px; font-size: 0.9375rem; text-decoration: none; }
  /*
   * Criar uma mesa: o nome tem o seu campo no topo e a capa de exemplo logo por baixo acompanha-o.
   * A barra de ação fica colada ao fundo: Cancelar e Criar lugar.
   */
  .novo-form { gap: 24px; }
  .novo-name { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; max-width: 30rem; }
  .novo-name .field { width: 100%; font-weight: 600; }
  .novo-name .field input { margin-top: 6px; font-size: 1.25rem; min-height: 52px; }
  .novo-name .fine { margin: 0; }
  .novo-suggest { min-height: 44px; padding: 0 16px; border: 1px dashed var(--control); border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-size: 0.875rem; font-weight: 500; cursor: pointer; }
  .novo-suggest:hover { background: var(--featured); }
  .novo-suggest:focus-visible, .novo-cancel:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .novo-dup { margin: 0; padding: 10px 14px; border-radius: 10px; background: #F3E6CF; box-shadow: inset 0 0 0 1px #D9B98A; color: #6B4413; font-size: 0.8125rem; line-height: 1.45; }
  .novo-dup[hidden], .novo-suggest[hidden] { display: none; }
  .novo-capa { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
  .novo-capa-dica { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--muted); }
  .novo-casa { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--muted); }
  .novo-casa a { color: var(--ink); text-underline-offset: 3px; }
  .novo-bar { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 14px; padding: 12px 0; background: var(--ground); box-shadow: 0 -1px 0 var(--line); }
  .novo-bar-hint { flex: 1 1 auto; min-width: 0; margin: 0; }
  .novo-cancel { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--ink); font-size: 0.9375rem; font-weight: 500; }
  button.novo-create { flex: 0 0 auto; width: auto; min-height: 48px; padding: 0 28px; }
  @media (max-width: 40em) {
    .novo-bar { display: grid; grid-template-columns: auto 1fr; }
    .novo-bar-hint { grid-column: 1 / -1; }
  }
  .eyebrow-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
  .eyebrow-link:hover { color: var(--ink); }
  .eyebrow-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  /*
   * A Casa: o formulário à esquerda e, à direita, a capa de exemplo que acompanha o que se escreve.
   * As secções repetem as da ficha do lugar.
   */
  .casa-saved { margin: 0; padding: 12px 18px; border-radius: 999px; background: var(--curation); color: var(--on-action); font-size: 0.875rem; align-self: flex-start; }
  .casa-grid { display: flex; flex-wrap: wrap; gap: 40px 56px; align-items: flex-start; }
  .casa-form { flex: 999 1 30rem; min-width: 0; gap: 0; }
  .casa-form .ficha-section.casa-first { border-top: 0; padding-top: 0; }
  .casa-form select { width: 100%; min-height: 52px; padding: 0 14px; border: 1.5px solid var(--control); background: var(--surface); color: var(--ink); font: inherit; font-size: 1rem; }
  .casa-note { margin: 0; padding: 14px 16px; background: var(--featured); border-radius: 12px; font-size: 0.875rem; line-height: 1.5; color: var(--body); }
  .casa-logo { display: flex; align-items: center; gap: 16px; padding: 14px; border: 1.5px dashed var(--control); border-radius: 12px; background: var(--surface); }
  .casa-logo-mark { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--tape); color: var(--body); font-family: "Newsreader", Georgia, serif; font-size: 1.5rem; font-weight: 500; }
  .casa-logo-mark img { width: 100%; height: 100%; object-fit: cover; }
  .casa-logo-body { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
  .casa-logo-title { font-size: 0.875rem; font-weight: 600; }
  .casa-logo-body .fine { margin: 0; }
  .casa-logo-pick { position: relative; display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; padding: 0 16px; border: 1.5px solid var(--ink); border-radius: 999px; font-size: 0.875rem; font-weight: 500; cursor: pointer; }
  .casa-logo-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
  .casa-logo-pick:has(:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
  .casa-logo-drop { font-size: 0.8125rem; }
  .casa-preview { flex: 1 1 18rem; max-width: 26rem; display: flex; flex-direction: column; gap: 12px; position: sticky; top: 24px; }
  .casa-preview h2 { margin: 0; font-family: inherit; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
  .casa-card { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px; background-color: var(--tape); background-image: var(--grain); box-shadow: 0 1px 0 var(--line), 0 14px 28px -14px rgba(42, 28, 19, 0.4); text-align: center; }
  .casa-card-name { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.22em; overflow-wrap: anywhere; }
  .casa-card-light { font-family: "Newsreader", Georgia, serif; font-style: italic; color: var(--body); }
  .casa-card-table { display: flex; align-items: center; gap: 12px; color: var(--capa-accent, var(--stamp)); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.2em; }
  .casa-card-rule { width: 24px; height: 1px; background: currentColor; }
  .place-signature { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; font-size: 0.75rem; color: var(--muted); text-align: center; }
  .place-signature img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
  .place-signature a { color: inherit; text-underline-offset: 3px; }
  .place-signature-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--body); }
  .stack-note::before { display: none; }
  .stack-note.is-team { background-color: var(--featured); }
  .stack-note .postmark { top: 12px; right: 12px; width: 3.25rem; height: 3.25rem; font-size: 0.5rem; }
  .stack-note .reader-text { margin: 0; font-size: 2.125rem; line-height: 1.24; letter-spacing: -0.01em; }
  .stack-note .reader-text.is-long { font-size: 1.5rem; line-height: 1.34; letter-spacing: 0; }
  .stack-note:has(.photo) { padding: 22px 22px 18px; gap: 12px; }
  .stack-note:has(.photo) .reader-text { font-size: 1.1875rem; line-height: 1.32; }
  .stack-note .reader-author { color: var(--muted); }
  .stack-note .photo { box-shadow: 0 1px 2px rgba(42, 28, 19, 0.14); }

  /*
   * O livro da visita, pintado pelas fichas resolvidas. O painel não leva data-book,
   * por isso continua com a cara da suite. O defeito (campo, polaroid, pardo, café)
   * coincide com as variáveis de sempre.
   */
  html[data-book] body { font-family: var(--face-body, "Instrument Sans", system-ui, sans-serif); }
  html[data-book] :is(.lid-title, .reader-end-title) { font-family: var(--face-title, "Newsreader", Georgia, serif); }
  html[data-book] :is(.lid-city, .lid-count, .end-copy, .lid-text .place-description) { font-family: var(--face-body, "Instrument Sans", system-ui, sans-serif); }
  :is(html[data-book] .reader.is-ready .reader-slide[data-id], .tema-livro, .house-feed) .reader-card[data-estilo="citacao"] .reader-text { font-family: var(--face-title, "Newsreader", Georgia, serif); }
  :is(html[data-book] .reader.is-ready .reader-slide[data-id], .tema-livro, .house-feed) .reader-card[data-estilo="citacao"] .reader-author { font-family: var(--face-body, "Instrument Sans", system-ui, sans-serif); }
  :is(html[data-book] .reader.is-ready .reader-slide[data-id], .tema-livro, .house-feed) .reader-card:is([data-estilo="mao"], [data-estilo="bilhete"]) .reader-text,
  :is(html[data-book] .reader.is-ready .reader-slide[data-id], .tema-livro, .house-feed) .reader-card:is([data-estilo="mao"], [data-estilo="bilhete"]) .reader-author { color: var(--ink); }
  html[data-book][data-moldura="margem"] .reader.is-ready .reader-slide[data-id] .reader-card:has(.photo) { --strip: 10px; }
  html[data-book][data-moldura="margem"] .reader.is-ready .reader-slide[data-id] .reader-card:has(.photo) .photo-slot > .photo {
    background: transparent;
    box-shadow: none;
    border: 1px solid color-mix(in srgb, var(--ink) 33%, transparent);
    transform: none;
  }
  html[data-book][data-moldura="margem"] .reader.is-ready .reader-slide[data-id] .reader-card:has(.photo) .photo-slot::before,
  html[data-book][data-moldura="margem"] .lid-postcard.has-photo::before { content: none; }
  html[data-book][data-moldura="margem"] .lid-postcard.has-photo { padding: 10px; background-color: transparent; }
  html[data-book][data-moldura="cheia"] .reader.is-ready .reader-slide[data-id] .reader-card:has(.photo) { --mat: 0px; --strip: 0px; --gutter: 0px; padding: 0 0 14px; gap: 12px; }
  html[data-book][data-moldura="cheia"] .reader.is-ready .reader-slide[data-id] .reader-card:has(.photo) .photo-slot > .photo {
    background: transparent;
    box-shadow: none;
    transform: none;
  }
  html[data-book][data-moldura="cheia"] .reader.is-ready .reader-slide[data-id] .reader-card:has(.photo) .photo-slot::before,
  html[data-book][data-moldura="cheia"] .lid-postcard.has-photo::before { content: none; }
  html[data-book][data-moldura="cheia"] .reader.is-ready .reader-slide[data-id] .reader-card:has(.photo) .reader-words { padding: 0 14px; }
  html[data-book][data-moldura="cheia"] .lid-postcard.has-photo { padding: 0; width: 100%; max-width: none; background: transparent; box-shadow: none; }

  .tema-switch { flex: none; width: 44px; height: 26px; padding: 0; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--surface); position: relative; font: inherit; color: inherit; cursor: pointer; }
  .tema-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 999px; background: var(--ink); }
  .tema-switch.is-on { background: var(--stamp); border-color: var(--stamp); }
  .tema-switch.is-on::after { left: 20px; background: var(--on-action); }

  .tema-livro-col { flex: 1 1 16rem; max-width: 22rem; min-width: 0; display: flex; flex-direction: column; gap: 8px; position: sticky; top: 16px; }
  .tema-livro-col > .fine { margin: 0; }
  .tema-livro {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--face-body, "Instrument Sans", system-ui, sans-serif);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 16%, transparent);
  }
  .tema-livro .lid-title { font-family: var(--face-title, "Newsreader", Georgia, serif); font-size: 1.75rem; margin-top: 12px; }
  .tema-livro :is(.lid-city, .lid-count, .lid-text .place-description) { font-family: var(--face-body, "Instrument Sans", system-ui, sans-serif); }
  .tema-livro .reader-card.reader-lid { padding: 16px 14px 12px; }
  .tema-livro .lid-postcard { width: min(78%, 11rem); margin-top: 10px; }
  .tema-livro .lid-postcard .window { max-height: 4.5rem; }
  .tema-livro .reader-card:has(.photo)::before { display: none; }
  .tema-livro .reader-card:has(.photo) { padding: 16px 14px 14px; gap: 12px; }
  .tema-livro .photo-slot { position: relative; display: flex; justify-content: center; }
  .tema-livro .photo-slot > .photo {
    display: block;
    width: min(100%, 11rem);
    aspect-ratio: auto 4 / 5;
    object-fit: contain;
    box-sizing: border-box;
    padding: 10px 10px 28px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(42, 28, 19, 0.18), 0 10px 18px -10px rgba(42, 28, 19, 0.4);
    transform: rotate(-1.2deg);
  }
  /* Deitada, a foto ganha a largura da ficha em vez de ficar do tamanho de uma de pé. */
  .tema-livro .photo-slot[data-shape="wide"] > .photo { width: 100%; }
  .tema-livro .photo-slot::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: -8px;
    left: calc(50% - 28px);
    width: 56px;
    height: 16px;
    background: var(--photo-tape);
    box-shadow: var(--photo-tape-edge);
    transform: rotate(-3deg);
    pointer-events: none;
  }
  .tema-livro[data-moldura="margem"] .photo-slot > .photo {
    padding: 8px;
    background: transparent;
    box-shadow: none;
    border: 1px solid color-mix(in srgb, var(--ink) 33%, transparent);
    transform: none;
  }
  .tema-livro[data-moldura="margem"] .photo-slot::before { content: none; }
  .tema-livro[data-moldura="cheia"] .reader-card:has(.photo) { padding: 0 0 12px; gap: 12px; }
  .tema-livro[data-moldura="cheia"] .photo-slot > .photo {
    width: 100%;
    padding: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
  }
  .tema-livro[data-moldura="cheia"] .photo-slot::before { content: none; }
  .tema-livro[data-moldura="cheia"] .reader-words { padding: 0 12px; }
  /* Sign-in da suite: marca e sulcos em cima, folha de papel com o formulário ao alcance do polegar. */
  .signin-screen { width: min(100%, 26rem); padding: 0; gap: 0; position: relative; overflow: hidden; }
  .signin-furrows { position: absolute; inset: 0 0 auto 0; width: 100%; height: 330px; pointer-events: none; }
  .signin-top { position: relative; display: flex; align-items: center; gap: 10px; padding: 56px 28px 0; color: var(--ink); }
  .signin-top .eyebrow { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.16em; color: var(--body); }
  .signin-sheet {
    position: relative;
    margin-top: auto;
    padding: 36px 28px 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    background: var(--surface);
    background-image: var(--grain);
    border-radius: 28px 28px 0 0;
    box-shadow: 0 -8px 32px rgba(74, 54, 40, 0.10);
  }
  .signin-sheet .stack { gap: 12px; }
  .signin-sheet h1 { margin: 0; font-family: "Newsreader", Georgia, serif; font-weight: 400; font-size: 2.75rem; line-height: 1.04; letter-spacing: -0.02em; max-width: 8ch; }
  .signin-sheet .copy { margin: 0; font-size: 1rem; line-height: 1.5; }
  .signin-sheet .field { font-weight: 600; font-size: 0.875rem; }
  .signin-sheet .field input:not([type="radio"]):not([type="file"]) { min-height: 56px; padding: 0 16px; font-size: 1.0625rem; font-weight: 400; border-radius: 14px; }
  .signin-sheet .primary { border-radius: 14px; min-height: 56px; font-size: 1.0625rem; }
  .signin-note { margin: 0; display: flex; align-items: flex-start; gap: 8px; font-size: 0.875rem; line-height: 1.45; color: var(--body); }
  .signin-note svg { flex: none; margin-top: 2px; }
  .signin-sheet .footer { padding-top: 0; }
  @media (min-width: 520px) { .signin-screen { margin-block: 5vh; min-height: 0; height: min(52rem, 90dvh); border-radius: 28px; background: var(--ground); box-shadow: 0 12px 48px rgba(74, 54, 40, 0.14); } .signin-sheet { border-radius: 28px 28px 0 0; } }