/* ---- fly.io-inspired theme: near-black violet, blurple CTAs, mono numerals ---- */
  :root {
    --bg: #0f0d17;
    --bg-glow: radial-gradient(60% 40% at 50% -5%, rgba(124, 58, 237, .28), transparent 70%);
    --surface: #171225;
    --surface-2: #1e1930;
    --border: rgba(255, 255, 255, .09);
    --border-strong: rgba(255, 255, 255, .16);
    --text: #e8e6f0;
    --muted: #9b96ad;
    --violet: #7c3aed;
    --violet-bright: #a78bfa;
    --pink: #f0abfc;
    --amber: #fbbf24;
    --mint: #34d399;
    --salmon: #fb7185;
    --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  }
  * { box-sizing: border-box; margin: 0; }
  body {
    background: var(--bg); color: var(--text); font-family: var(--sans);
    min-height: 100vh; background-image: var(--bg-glow); background-repeat: no-repeat;
    -webkit-font-smoothing: antialiased;
  }
  .wrap { max-width: 880px; margin: 0 auto; padding: 40px 24px 96px; }

  /* The header carried a fixed row of address · balance · buy · sign out, which is wider
     than a phone. It wraps now, and the address — the least useful thing to someone who is
     already signed in — steps aside first. */
  header { display: flex; align-items: baseline; gap: 10px 14px; margin-bottom: 6px; flex-wrap: wrap; }
  .logo {
    font-weight: 800; font-size: 22px; letter-spacing: -.02em;
    display: inline-flex; align-items: center; gap: 9px;
    color: var(--text); text-decoration: none;
  }
  .logo img { display: block; border-radius: 7px; }
  .crumb {
    font-family: var(--mono); font-size: 11.5px; color: var(--muted);
    border: 1px solid var(--border-strong); border-radius: 999px; padding: 2px 9px;
  }
  .logo .dot { color: var(--violet-bright); }

  h1, .h1like {
    font-size: 42px; font-weight: 800; letter-spacing: -.03em; line-height: 1.08;
    margin: 26px 0 10px;
    background: linear-gradient(92deg, #fff 10%, var(--violet-bright) 55%, var(--pink) 95%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .sub { color: var(--muted); font-size: 16px; max-width: 56ch; line-height: 1.55; }

  .card {
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
    padding: 22px; margin-top: 22px;
  }
  .card h2 {
    font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 14px;
  }

  /* dropzone */
  #drop {
    border: 1.5px dashed var(--border-strong); border-radius: 12px; padding: 34px 20px;
    text-align: center; cursor: pointer; transition: border-color .15s, background .15s;
  }
  #drop:hover, #drop.over { border-color: var(--violet-bright); background: rgba(124, 58, 237, .07); }
  #drop .big { font-size: 17px; font-weight: 600; }
  #drop .hint { color: var(--muted); font-size: 13px; margin-top: 6px; }
  #preview { display: none; max-height: 240px; border-radius: 10px; margin: 0 auto; max-width: 100%; }

  /* option chips */
  .chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .chip {
    font-family: var(--mono); font-size: 14px; padding: 8px 16px; border-radius: 999px;
    border: 1px solid var(--border-strong); background: transparent; color: var(--text);
    cursor: pointer; transition: all .12s;
  }
  .chip:hover { border-color: var(--violet-bright); }
  .chip.on { background: var(--violet); border-color: var(--violet); color: #fff; font-weight: 700; }
  .row { display: flex; gap: 28px; flex-wrap: wrap; }
  .row > div { flex: 1; min-width: 260px; }
  .fmt { display: flex; align-items: center; gap: 10px; padding: 7px 0; cursor: pointer; font-size: 14px; }
  .fmt input { accent-color: var(--violet); width: 16px; height: 16px; }
  .fmt .dim { color: var(--muted); font-family: var(--mono); font-size: 12px; margin-left: auto; }
  .fmt.only { cursor: default; color: var(--text); }

  /* quote bar */
  .quote {
    display: flex; align-items: center; gap: 18px; margin-top: 22px; padding: 16px 20px;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px;
  }
  .quote .price { font-family: var(--mono); font-size: 30px; font-weight: 700; color: var(--amber); }
  .quote .detail { color: var(--muted); font-size: 13px; line-height: 1.45; }
  .quote .spacer { flex: 1; }
  button.cta {
    font-size: 16px; font-weight: 700; color: #fff; background: var(--violet);
    border: none; border-radius: 10px; padding: 13px 26px; cursor: pointer;
    transition: background .12s, transform .05s;
  }
  button.cta:hover { background: var(--violet-bright); }
  button.cta:active { transform: translateY(1px); }
  button.cta:disabled { background: #3f3654; color: #7d7691; cursor: not-allowed; }

  /* progress */
  #progress { display: none; }
  .bar { height: 6px; background: var(--surface-2); border-radius: 999px; overflow: hidden; margin-top: 14px; }
  .bar > div {
    height: 100%; width: 0%; border-radius: 999px; transition: width .6s ease;
    background: linear-gradient(90deg, var(--violet), var(--pink));
  }
  #steplabel { font-size: 17px; font-weight: 600; margin-top: 16px; }
  #stepmeta { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 5px; }

  /* results */
  #results { display: none; }
  .banner {
    border-radius: 12px; padding: 14px 18px; font-size: 14px; margin-bottom: 16px;
    border: 1px solid; line-height: 1.5;
  }
  .banner.ok { border-color: rgba(52, 211, 153, .35); background: rgba(52, 211, 153, .08); color: var(--mint); }
  .banner.bad { border-color: rgba(251, 113, 133, .35); background: rgba(251, 113, 133, .08); color: var(--salmon); }
  /* Transient trouble, not failure — the session is intact and we are retrying. */
  .banner.warn { border-color: rgba(251, 191, 36, .35); background: rgba(251, 191, 36, .08); color: var(--amber); }
  .buyintro { color: var(--muted); font-size: 14px; line-height: 1.6; margin-bottom: 16px; }
  .buyrow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
  .qtybox { display: flex; align-items: center; border: 1px solid var(--border-strong);
            border-radius: 10px; overflow: hidden; background: var(--surface-2); }
  .qtybtn { background: none; border: 0; color: var(--text); font-size: 19px; width: 40px; height: 42px; cursor: pointer; }
  .qtybtn:hover { background: rgba(255,255,255,.06); }
  #qty { width: 74px; height: 42px; background: none; border: 0; color: var(--text);
         font-family: var(--mono); font-size: 16px; text-align: center; -moz-appearance: textfield; }
  #qty::-webkit-outer-spin-button, #qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .qtylabel { color: var(--muted); font-size: 14px; margin-left: -8px; }
  .buytotal { font-family: var(--mono); font-size: 26px; font-weight: 700; color: var(--amber); margin-left: auto; }
  .buynote { color: var(--muted); font-size: 12px; margin-top: 12px; }
  .ghostbtn { background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--text);
              border-radius: 10px; padding: 9px 18px; font-size: 14px; cursor: pointer; }
  .histmore { text-align: center; margin-top: 14px; }
  .hist { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
  .hist img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: #000; }
  .hist .meta { padding: 9px 11px; font-size: 12px; line-height: 1.6; }
  .hist .meta .dl { color: var(--violet-bright); text-decoration: none; }
  .hist img { cursor: zoom-in; }
  .hist .meta .when { color: var(--muted); font-family: var(--mono); font-size: 11px; }
  .hist .meta .tool { color: var(--violet-bright); font-weight: 600; }
  .hist .none { aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
                color: var(--muted); font-size: 12px; text-align: center; padding: 12px; }
  .st { font-family: var(--mono); font-size: 10.5px; padding: 1px 7px; border-radius: 999px; border: 1px solid; }
  .st.DONE { color: var(--mint); border-color: rgba(52,211,153,.4); }
  .st.FAILED, .st.REJECTED { color: var(--salmon); border-color: rgba(251,113,133,.4); }
  .st.RUNNING, .st.QUEUED, .st.PARTIAL { color: var(--amber); border-color: rgba(251,191,36,.4); }
  .muted { color: var(--muted); font-size: 13.5px; }

  .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
  .shot { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
  .shot img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: #000; }
  .shot .meta { padding: 10px 12px; }
  .shot .tpl { font-family: var(--mono); font-size: 11px; color: var(--muted); }
  .tabs { display: flex; gap: 5px; padding: 0 12px 12px; flex-wrap: wrap; }
  .tabs button {
    font-family: var(--mono); font-size: 10.5px; padding: 4px 9px; border-radius: 6px;
    border: 1px solid var(--border-strong); background: transparent; color: var(--muted); cursor: pointer;
  }
  .tabs button.on { background: var(--violet); border-color: var(--violet); color: #fff; }
  a.dl { color: var(--violet-bright); font-size: 12.5px; text-decoration: none; }
  a.dl:hover { text-decoration: underline; }

  /* style controls */
  /* style picker */
  .styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
  .style {
    border: 1.5px solid var(--border-strong); border-radius: 11px; overflow: hidden;
    cursor: pointer; background: var(--surface-2); color: inherit; font: inherit;
    padding: 0; text-align: left; transition: border-color .12s;
    display: flex; flex-direction: column;
  }
  .style .bl { margin-top: auto; }
  .style:hover { border-color: var(--violet-bright); }
  .style.on { border-color: var(--violet); box-shadow: 0 0 0 1px var(--violet); }
  /* The badge lives on the photo, in its own positioned box. Absolutely positioning it
     against the card put it on top of the style's name on every card that had one. */
  .style .thumb { position: relative; }
  .style img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; background: #000; }
  .style .nm { padding: 7px 9px 2px; font-size: 12.5px; font-weight: 600; }
  .style .bl { padding: 0 9px 8px; font-size: 11px; color: var(--muted); line-height: 1.4; }
  .style .pick {
    position: absolute; top: 6px; right: 6px; width: 21px; height: 21px; border-radius: 50%;
    background: rgba(10,8,16,.7); border: 1.5px solid rgba(255,255,255,.5);
    display: grid; place-items: center; font-size: 11px; color: #fff; font-weight: 700;
  }
  .style.on .pick { background: var(--violet); border-color: var(--violet); }
  .style .warn {
    position: absolute; left: 6px; right: 6px; bottom: 6px; font-family: var(--mono); font-size: 9px;
    background: rgba(10,8,16,.85); border: 1px solid rgba(251,113,133,.45); color: var(--salmon);
    padding: 1px 5px; border-radius: 999px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .lblhint { color: var(--muted); font-weight: 400; font-size: 12px; }

  .facet { margin-top: 18px; }
  .facet > .lbl { font-size: 14px; margin-bottom: 9px; }
  /* image chips — the picture is the label; the words are the caption */
  .facet .chips { gap: 10px; }
  .facet .chip {
    font-family: var(--sans); font-size: 13px; padding: 6px 14px 6px 6px;
    display: flex; align-items: center; gap: 9px; border-radius: 12px;
  }
  .facet .chip img {
    width: 40px; height: 40px; border-radius: 8px; object-fit: cover;
    display: block; background: #000; flex: 0 0 auto;
  }
  .facet .chip .txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
  .facet .chip .n { font-family: var(--mono); font-size: 10px; opacity: .55; }
  .facet .chip.on .n { opacity: .8; }
  .avoidbox {
    width: 100%; background: var(--surface-2); border: 1px solid var(--border-strong);
    border-radius: 9px; padding: 11px 13px; color: var(--text); font-family: var(--sans);
    font-size: 14px; outline: none;
  }
  .avoidbox:focus { border-color: var(--violet-bright); }
  .avoidbox::placeholder { color: #6d6880; }
  .sugg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
  .sugg button {
    font-size: 12px; padding: 4px 11px; border-radius: 999px; cursor: pointer;
    border: 1px dashed var(--border-strong); background: transparent; color: var(--muted);
  }
  .sugg button:hover { border-color: var(--salmon); color: var(--salmon); border-style: solid; }
  .sugg button.on { border-style: solid; border-color: var(--salmon); color: var(--salmon); background: rgba(251,113,133,.1); }
  .poolnote { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: 12px; }
  /* a choice that would match nothing is shown as unavailable, never as a dead end */
  .facet .chip.off { opacity: .3; cursor: not-allowed; }
  .facet .chip.off img { filter: grayscale(1); }
  .poolnote.warn { color: var(--salmon); }
  .econ { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--border); }
  .econ div { font-family: var(--mono); }
  .econ .k { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
  .econ .v { font-size: 19px; font-weight: 700; margin-top: 3px; }
  .econ .v.good { color: var(--mint); }
  .econ .v.warn { color: var(--salmon); }
  .live { font-family: var(--mono); font-size: 12px; color: var(--amber); }

  /* --- sign-in --- */
  /* The landing is full width; only the credential fields are column-width. A 420px cap
     on the whole block squeezed the before/after and the FAQ into the sign-in column. */
  .gate { margin: 44px 0 0; }
  .gate > h1 { margin-top: 0; }
  .signin {
    margin: 28px 0 0; padding: 22px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  }
  .signin h3 { font-size: 15px; margin-bottom: 4px; }
  .signin .hint { color: var(--muted); font-size: 13px; margin-bottom: 16px; line-height: 1.55; }
  .gate p { color: var(--muted); font-size: 15px; line-height: 1.6; margin-bottom: 22px; }
  .field {
    width: 100%; background: var(--surface-2); border: 1px solid var(--border-strong);
    border-radius: 10px; padding: 13px 15px; color: var(--text); font-size: 15px;
    font-family: var(--sans); outline: none; margin-bottom: 12px;
  }
  .field:focus { border-color: var(--violet-bright); }
  .field.code {
    font-family: var(--mono); font-size: 26px; letter-spacing: .3em; text-align: center;
  }
  .gate .cta { width: 100%; }
  /* Turnstile frequently fails to initialise (blockers, strict privacy modes) and leaves
     an empty div reserving space — a gap in the middle of the sign-in card with nothing
     in it. Collapse it when it has no content. */
  #turnstile:empty { display: none; margin: 0 !important; }
  .note { color: var(--muted); font-size: 13px; margin-top: 14px; line-height: 1.6; }
  .note a { color: var(--violet-bright); cursor: pointer; text-decoration: none; }
  .err { color: var(--salmon); font-size: 13.5px; margin-top: 12px; min-height: 18px; }
  .err:empty { margin-top: 0; min-height: 0; }
  .whoami {
    margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--muted);
    display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; min-width: 0;
  }
  .whoami b { color: var(--amber); }
  .whoami a { color: var(--muted); cursor: pointer; text-decoration: underline; }
  .whoami .sep { color: var(--border-strong); font-style: normal; }
  .whoami .email { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  @media (max-width: 560px) {
    .wrap { padding-left: 16px; padding-right: 16px; }
    header { gap: 8px 10px; }
    .logo { font-size: 19px; }
    .whoami { margin-left: 0; width: 100%; font-size: 11px; }
    .whoami .email { display: none; }
    /* On a phone the address is dropped, so its trailing separator must go with it. */
    .whoami .email, .whoami .email + .sep { display: none; }
  }
  /* ---- landing ---------------------------------------------------------------
     One rhythm for the whole page: a shared column, a shared vertical step, and
     sections that all start and end on the same two vertical lines. The previous
     version put a 470px column inside an 880px page, so two thirds of the width sat
     empty on the right while the sections underneath ran full width — which is what
     read as unfinished rather than any single element being wrong.
     ------------------------------------------------------------------------- */
  :root { --col: 470px; --step: 56px; }

  /* The landing earns a wider canvas than the app: it has a hero to balance, where the
     app is a single column of forms. Toggled by class so the two never fight. */
  body.landing .wrap { max-width: 1060px; padding-top: 34px; }

  .hero { display: grid; gap: 34px; align-items: start; }
  .heroL { min-width: 0; }
  .heroR { min-width: 0; }

  /* Stacked, the two-column grouping would put the sign-in form ABOVE the comparison —
     asking for an email before showing what the product does. `display: contents` lifts
     the children into the flex flow so the proof can be ordered ahead of the form without
     duplicating markup or breaking the desktop columns. */
  @media (max-width: 899px) {
    .hero { display: flex; flex-direction: column; gap: 0; }
    .heroL, .heroR { display: contents; }
    .hero h1 { order: 1; }
    .lede    { order: 2; }
    .ba      { order: 3; }
    .bacap   { order: 4; }
    .signin  { order: 5; margin-top: 28px; }
  }

  .lede { color: var(--muted); font-size: 16.5px; line-height: 1.62; max-width: 46ch; }
  /* Directly under the headline: the price and the absence of a subscription are the
     pitch, not small print to be found further down. */
  .claims { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0 26px; }
  .claim {
    font-family: var(--mono); font-size: 11.5px; color: var(--muted);
    border: 1px solid var(--border-strong); border-radius: 999px; padding: 4px 11px;
  }
  .claim b { color: var(--amber); font-weight: 700; }
  .lede b { color: var(--text); }

  .ba {
    position: relative; aspect-ratio: 1;
    border-radius: 14px; overflow: hidden; border: 1px solid var(--border);
    user-select: none; touch-action: pan-y;
  }
  .baimg { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
  /* The "before" is clipped, not resized, so the wipe cannot squash either photo. */
  .bafront { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
  .balabel {
    position: absolute; bottom: 10px; font-family: var(--mono); font-size: 10.5px;
    padding: 3px 9px; border-radius: 999px; background: rgba(10,8,16,.8);
    color: var(--muted); border: 1px solid var(--border-strong); backdrop-filter: blur(6px);
    pointer-events: none;
  }
  .balabel.left { left: 10px; }
  .balabel.right { right: 10px; color: var(--mint); border-color: rgba(52,211,153,.45); }
  .bahandle {
    position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px;
    background: rgba(255,255,255,.85); transform: translateX(-1px); pointer-events: none;
  }
  .bahandle span {
    position: absolute; top: 50%; left: 50%; width: 34px; height: 34px;
    transform: translate(-50%, -50%); border-radius: 50%;
    background: rgba(10,8,16,.72); border: 1.5px solid rgba(255,255,255,.85);
    backdrop-filter: blur(6px);
  }
  .bahandle span::before, .bahandle span::after {
    content: ''; position: absolute; top: 50%; width: 0; height: 0;
    border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent;
  }
  .bahandle span::before { left: 7px; margin-top: -4.5px; border-right: 6px solid #fff; }
  .bahandle span::after { right: 7px; margin-top: -4.5px; border-left: 6px solid #fff; }
  /* A real range input at zero opacity: drag, touch, arrow keys and screen-reader
     semantics come from the platform instead of three hand-rolled handlers. */
  .barange {
    position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
    opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: none;
  }
  .barange::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 100%; }
  .barange::-moz-range-thumb { width: 44px; height: 100%; border: 0; }
  .bacap { color: var(--muted); font-size: 12.5px; line-height: 1.6; margin-top: 12px; }
  .bacap b { color: var(--text); font-weight: 600; }

  .how { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-top: var(--step); }
  .step {
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    padding: 0 0 17px; display: flex; flex-direction: column; gap: 5px; overflow: hidden;
  }
  /* height:auto is required alongside the width/height attributes, or the intrinsic
     height wins over the CSS ratio — the same trap that made the hero 1080px tall. */
  .step img { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; display: block; background: #000; }
  .step .n { margin: 14px 19px 0; }
  .step b, .step span:last-child { padding: 0 19px; }
  .step .n {
    font-family: var(--mono); font-size: 11px; color: var(--violet-bright);
    border: 1px solid rgba(167,139,250,.4); border-radius: 999px; padding: 1px 8px; width: fit-content; margin-bottom: 4px;
  }
  .step b { font-size: 14.5px; }
  .step span:last-child { color: var(--muted); font-size: 13px; line-height: 1.55; }

  .faq { margin-top: var(--step); }
  .faq h2 {
    font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 8px;
  }
  .faq details { border-bottom: 1px solid var(--border); }
  .faq summary {
    cursor: pointer; padding: 15px 26px 15px 0; font-size: 15px; font-weight: 600;
    list-style: none; position: relative;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after {
    content: '+'; position: absolute; right: 4px; top: 13px; color: var(--violet-bright);
    font-size: 19px; font-weight: 400;
  }
  .faq details[open] summary::after { content: '\2212'; }
  .faq summary:hover { color: var(--violet-bright); }
  /* Prose caps at a readable measure even though the rule spans the column. */
  .faq details p { color: var(--muted); font-size: 14px; line-height: 1.7; padding: 0 20px 17px 0; max-width: 68ch; }
  .foot {
    color: var(--muted); font-family: var(--mono); font-size: 11.5px;
    margin-top: var(--step); padding-top: 22px; border-top: 1px solid var(--border);
  }

  /* Desktop: copy and form on the left, the proof on the right, both ending on the
     same baseline. Below this the hero stacks and the wipe takes over. */
  @media (min-width: 900px) {
    /* One large square rather than two small panes.
       Side by side, each photo was ~235px and neither could be studied. The wipe shows
       ONE image at full size and lets the other slide over it, so both are seen whole —
       and nothing is cropped, because the frame keeps the sources' square ratio.
       The columns are centred against each other rather than stretched: forcing equal
       heights would mean cropping the photos to portrait, which defeats the point. */
    .hero {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 52px;
      align-items: stretch;
    }
    .heroR { display: flex; flex-direction: column; justify-content: center; }
  }

  #app { display: none; }

  /* ---------- discovery survey ---------- */
  /* Asked once, after sign-up. A <dialog> so the browser supplies the modal semantics,
     focus trap and Esc — all of which a hand-rolled overlay gets subtly wrong. */
  #discovery {
    border: 1px solid var(--border-strong); border-radius: 16px; background: var(--surface);
    color: var(--text); padding: 26px 26px 22px; max-width: 430px; width: calc(100% - 32px);
    /* A <dialog> centres itself with `margin: auto` — which the `* { margin: 0 }` reset at
       the top of this file silently removes, pinning it to the top-left corner. */
    margin: auto;
  }
  #discovery::backdrop { background: rgba(8, 6, 14, .68); backdrop-filter: blur(3px); }
  #discovery h3 { font-size: 18px; letter-spacing: -.01em; margin-bottom: 6px; }
  #discovery .sub { color: var(--muted); font-size: 13.5px; line-height: 1.55; margin-bottom: 18px; }
  #discovery .opts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
  #discovery .opt {
    font-size: 13.5px; color: var(--text); background: var(--surface-2);
    border: 1px solid var(--border-strong); border-radius: 999px; padding: 8px 14px; cursor: pointer;
  }
  #discovery .opt:hover { border-color: var(--violet-bright); }
  #discovery .opt.on { background: var(--violet); border-color: var(--violet); color: #fff; }
  #discovery input {
    width: 100%; background: var(--surface-2); border: 1px solid var(--border-strong);
    color: var(--text); border-radius: 10px; padding: 11px 13px; font-size: 14px; margin-bottom: 14px;
  }
  #discovery .row { display: flex; align-items: center; gap: 12px; }
  #discovery .skip {
    background: none; border: none; color: var(--muted); font-size: 13.5px;
    cursor: pointer; text-decoration: underline; padding: 0;
  }
  #discovery .cta { padding: 11px 22px; font-size: 15px; }