:root {
      --bg: #12110e;
      --raise: #1c1914;
      --surface: #262219;
      --line: #3c352c;
      --fg: #f3eee6;
      --muted: #a3988c;
      --brass: #e2a23a;
      --ink: #1a1408;
      color-scheme: dark;
    }
    * { box-sizing: border-box; }
    html, body { margin: 0; background: var(--bg); color: var(--fg); }
    body {
      font-family: Outfit, ui-sans-serif, system-ui, sans-serif;
      -webkit-font-smoothing: antialiased;
    }
    button, input { font: inherit; color: inherit; }
    button:not(:disabled) { cursor: pointer; }
    button:disabled { opacity: 0.5; }
    .bar { height: 4px; background: var(--brass); }
    .wrap { width: min(36rem, 100%); margin: 0 auto; padding: 2rem 1.25rem 3rem; display: flex; flex-direction: column; gap: 2rem; }
    h1 { font-family: Fraunces, Georgia, serif; font-size: 2.5rem; font-weight: 560; line-height: 1; margin: 0; }
    .brand { display: flex; align-items: center; gap: 0.5rem; }
    .mark { color: var(--brass); }
    .lede { max-width: 22rem; margin: 0.75rem 0 0; color: var(--muted); }
    form, .stack { display: flex; flex-direction: column; gap: 0.75rem; }
    label.field { font-size: 0.875rem; font-weight: 500; }
    input[type="url"] {
      height: 3rem; width: 100%; border-radius: 1rem; border: 1px solid var(--line);
      background: var(--surface); padding: 0 1rem; outline: none;
    }
    input[type="url"]:focus { border-color: var(--brass); }
    .row { display: flex; flex-direction: column; gap: 0.75rem; }
    @media (min-width: 640px) { .row { flex-direction: row; } }
    .btn {
      height: 3rem; border: 0; border-radius: 999px; padding: 0 1.25rem;
      display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    }
    .btn.grow { flex: 1; }
    .btn.solid { background: var(--brass); color: var(--ink); font-weight: 500; }
    .btn.ghost { background: transparent; border: 1px solid var(--line); }
    .btn.slim { height: 2.75rem; font-size: 0.875rem; }
    .alert, .note, .quiet { font-size: 0.875rem; color: var(--muted); margin: 0; }
    .alert { color: var(--fg); background: var(--raise); border: 1px solid var(--line); border-radius: 1rem; padding: 0.75rem 1rem; }
    .card { background: var(--raise); border: 1px solid var(--line); border-radius: 1.5rem; padding: 1rem; display: flex; flex-direction: column; gap: 1.25rem; }
    .who { display: flex; gap: 0.75rem; align-items: center; min-width: 0; }
    .avatar, .ph {
      width: 2.75rem; height: 2.75rem; border-radius: 999px; object-fit: cover;
      border: 1px solid var(--line); background: var(--surface); flex: none;
    }
    .ph { display: flex; align-items: center; justify-content: center; }
    .who p { margin: 0; }
    .who .name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .copy { margin: 0; line-height: 1.5; }
    .stage { position: relative; aspect-ratio: 16/9; border-radius: 1rem; overflow: hidden; background: var(--bg); }
    .stage video, .stage iframe, .stage img.cover { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
    .stage video { object-fit: contain; background: #000; }
    .play {
      position: absolute; inset: 0; border: 0; background: transparent; display: flex; align-items: center; justify-content: center;
    }
    .play span {
      width: 4rem; height: 4rem; border-radius: 999px; background: var(--brass); color: var(--ink);
      display: flex; align-items: center; justify-content: center; position: relative;
    }
    .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
    .choice {
      min-height: 2.75rem; border-radius: 1rem; border: 1px solid var(--line); background: var(--bg);
      padding: 0.5rem 0.75rem; text-align: left; display: flex; flex-direction: column; justify-content: center;
    }
    .choice.on { border-color: var(--brass); background: var(--surface); }
    .choice small, .quiet { color: var(--muted); }
    .pics { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
    .pics img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 1rem; background: var(--surface); }
    .recent { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
    .recent button {
      width: 100%; display: flex; gap: 0.75rem; align-items: center; text-align: left;
      background: var(--raise); border: 1px solid var(--line); border-radius: 1rem; padding: 0.5rem;
    }
    .recent img, .recent .ph { width: 3rem; height: 3rem; border-radius: 0.75rem; }
    .headrow { display: flex; align-items: center; justify-content: space-between; }
    h2 { font-size: 0.875rem; font-weight: 500; margin: 0; }
    .textbtn { background: none; border: 0; color: var(--muted); height: 2.75rem; display: inline-flex; align-items: center; gap: 0.25rem; }
    .spin { width: 1rem; height: 1rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 999px; animation: spin 0.7s linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }
    .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    ::selection { background: var(--brass); color: var(--ink); }

.back-link{display:block;max-width:640px;margin:22px auto 0;padding:0 24px;color:#c7b694;font:12px system-ui;text-decoration:none}