:root {
  --bg: #16121f;
  --ink: #f5f0fb;
  --ink-2: #bdb3d0;
  --ink-3: #8f85a8;
  --line: rgba(245,240,251,.12);
  --line-2: rgba(245,240,251,.26);
  --panel: rgba(30,24,44,.90);
  --accent: #f0559a;
  --mono: Switzer, system-ui, sans-serif;
  --sans: Switzer, system-ui, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--sans); overflow: hidden; -webkit-font-smoothing: antialiased; }
canvas#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
button, input { font: inherit; }
.mono, .stats, .legend, .label, .meta, #intro-line, #intro-steps, .hint, .drop p, .toast { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }

.hud { position: fixed; top: 24px; left: 26px; z-index: 5; pointer-events: none; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.hud h1 { margin: 0; font-size: 15px; font-weight: 500; letter-spacing: .02em; }
.hud .sub { margin: 8px 0 0; color: var(--ink-2); font-size: 13px; max-width: 340px; line-height: 1.5; }
.stats { display: flex; gap: 28px; margin: 22px 0 0; color: var(--ink-3); }
.stats div { display: flex; flex-direction: column; gap: 6px; }
.stats dt { font-size: 10px; }
.stats dd { margin: 0; font-size: 20px; letter-spacing: 0; color: var(--ink); font-weight: 500; }

.seg { pointer-events: auto; display: inline-flex; margin-top: 18px; border: 1px solid var(--line-2); }
.seg button { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; background: transparent; border: 0; color: var(--ink-3); padding: 7px 12px; cursor: pointer; }
.seg button.on { background: rgba(230,232,238,.08); color: var(--ink); }
.seg button:hover { color: var(--ink); }
.loadbox { pointer-events: auto; margin-top: 16px; width: 380px; border: 1px solid var(--line); border-left: 1px solid var(--accent); padding: 12px 14px; background: rgba(30,24,44,.7); display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.loadbox p { width: 100%; margin: 0 0 4px; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.ghost.small { padding: 6px 10px; font-size: 10px; }
.small.link { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); text-decoration: none; }
.small.link:hover { color: var(--accent); }
.sw-co { border-radius: 2px; border-color: var(--ink-2); }
.legend { position: fixed; top: 26px; right: 26px; z-index: 5; display: flex; flex-direction: column; gap: 8px; color: var(--ink-3); pointer-events: none; text-align: right; }
.legend span { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.sw { width: 9px; height: 9px; border-radius: 50%; display: inline-block; border: 1.5px solid var(--ink-3); }
.sw-rec { border-color: var(--ink); }
.sw-con { border-color: var(--ink-3); }
.sw-tie { border-color: var(--accent); box-shadow: 0 0 8px var(--accent); }

.panel { position: fixed; top: 96px; right: 26px; width: 360px; max-height: calc(100vh - 290px); overflow: auto; z-index: 6;
  background: var(--panel); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line); padding: 22px; animation: rise .4s cubic-bezier(.2,.8,.2,1); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.panel .close { position: absolute; top: 8px; right: 10px; background: none; border: 0; color: var(--ink-3); font-size: 20px; cursor: pointer; }
.panel .close:hover { color: var(--ink); }
.who { display: flex; gap: 14px; align-items: flex-start; }
.who img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--accent); background: #111318; }
.who img.logo { border-radius: 10px; object-fit: contain; padding: 10px; background: #0f1116; }
.who h2 { margin: 0; font-size: 17px; font-weight: 500; }
.who p { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.who .meta { margin-top: 8px; color: var(--ink-3); font-size: 10px; }
.ties { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 6px; }
.ties .label { width: 100%; color: var(--ink-3); margin: 0 0 4px; font-size: 10px; }
.ties button { border: 1px solid var(--line-2); background: transparent; color: var(--ink); padding: 5px 10px; font-size: 12px; cursor: pointer; }
.ties button:hover { border-color: var(--accent); color: var(--accent); }
blockquote { margin: 18px 0 0; padding: 0 0 0 14px; border-left: 1px solid var(--line-2); font-size: 13px; line-height: 1.6; color: var(--ink-2); white-space: pre-line; }
.panel-actions { display: flex; gap: 8px; margin-top: 18px; }
.ghost { border: 1px solid var(--line-2); background: transparent; color: var(--ink); padding: 8px 12px; font-size: 12px; cursor: pointer; text-decoration: none; font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.ghost:hover { border-color: var(--accent); color: var(--accent); }

.ask { position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%); width: min(600px, calc(100vw - 40px)); z-index: 6; display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.pills-wrap { display: flex; flex-direction: column; gap: 9px; background: rgba(30,24,44,.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line-2); border-radius: 14px; padding: 12px 14px; box-shadow: 0 18px 50px rgba(0,0,0,.6); }
.pills-label { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.answer { pointer-events: auto; width: 100%; max-height: 42vh; overflow: auto; background: rgba(30,24,44,.97); border: 1px solid var(--line-2); border-left: 2px solid var(--accent); border-radius: 14px; padding: 16px 18px; font-size: 14.5px; line-height: 1.62; color: var(--ink); animation: rise .4s cubic-bezier(.2,.8,.2,1); position: relative; box-shadow: 0 18px 50px rgba(0,0,0,.55); }
.answer p { margin: 0; padding-right: 52px; }
.answer-q { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 9px !important; }
.answer-q:empty { display: none; }
.answer.thinking p { color: var(--ink-3); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.answer.thinking p::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-radius: 50%; background: var(--accent); animation: blink 1s infinite; vertical-align: middle; }
@keyframes blink { 50% { opacity: .15; } }
.mini { position: absolute; top: 10px; right: 10px; border: 1px solid var(--line); background: transparent; color: var(--ink-3); padding: 3px 7px; font-size: 10px; cursor: pointer; font-family: var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.mini:hover { color: var(--ink); border-color: var(--line-2); }
.pills { display: flex; flex-wrap: wrap; gap: 7px; }
.pills button { border: 1px solid var(--line-2); background: rgba(230,232,238,.08); color: var(--ink); padding: 8px 12px; border-radius: 9px; cursor: pointer; transition: .15s; font-size: 13px; line-height: 1.2;  }
.pills button:hover { color: var(--accent); border-color: var(--accent); background: rgba(230,232,238,.13); }
.pills button.on { color: var(--accent); border-color: var(--accent); background: rgba(240,85,154,.14); }
.bar { width: 100%; display: flex; align-items: center; gap: 12px; background: rgba(30,24,44,.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line-2); border-radius: 12px; padding: 5px 5px 5px 14px; transition: border-color .2s, background .2s; box-shadow: 0 18px 50px rgba(0,0,0,.6); }
.bar:hover { border-color: var(--line-2); }
.bar:focus-within { border-color: var(--accent); }
.prompt-glyph { font-family: var(--mono); color: var(--accent); }
.bar input { flex: 1; background: none; border: 0; color: var(--ink); outline: none; font-size: 14px;  }
.bar input::placeholder { color: var(--ink-3); }
.bar button { border: 1px solid var(--line-2); background: rgba(230,232,238,.06); color: var(--ink); padding: 8px 15px; border-radius: 9px; cursor: pointer; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.bar button:hover { border-color: var(--accent); color: var(--accent); }
.bar button:disabled { opacity: .4; cursor: default; }
.hint { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); margin: 0; color: var(--ink-3); font-size: 10px; z-index: 6; opacity: .7; white-space: nowrap; }
.hint b { color: var(--ink-2); font-weight: 500; }

.intro { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(22,18,31,.88); transition: opacity .9s; }
.intro.out { opacity: 0; pointer-events: none; }
.intro-card { text-align: left; max-width: 520px; padding: 0 24px; }
.intro .kicker { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0 0 18px; }
.intro .face { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--accent); box-shadow: 0 0 24px rgba(240,85,154,.35); margin: 0 0 22px; display: block; }
.intro h2, .intro .lede { text-wrap: balance; }
.intro h2 { font-size: 34px; line-height: 1.12; font-weight: 500; margin: 0 0 18px; letter-spacing: -.01em; }
.intro .lede { font-size: 16px; line-height: 1.6; color: var(--ink); margin: 0 0 14px; }
.intro .how { font-size: 14px; line-height: 1.6; color: var(--ink-2); margin: 0 0 26px; }
.intro .enter { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; background: var(--ink); color: #0b0d12; border: 0; padding: 12px 18px; cursor: pointer; }
.intro .enter:hover { background: var(--accent); }
.intro .fine { margin: 22px 0 0; font-size: 12px; color: var(--ink-3); }
.intro .fine a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.intro .loading { margin-top: 28px; text-align: left; }
.intro.out { opacity: 0; pointer-events: none; }
.ring { width: 44px; height: 44px; margin: 0 0 26px; border-radius: 50%; border: 1px solid var(--line-2); border-top-color: var(--accent); animation: spin 1.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#intro-line { margin: 0; color: var(--accent); }
#intro-steps { list-style: none; padding: 0; margin: 22px 0 0; color: var(--ink-3); font-size: 10px; }
#intro-steps li { margin: 8px 0; transition: .3s; }
#intro-steps li.on { color: var(--ink); }
#intro-steps li.done { color: var(--ink-3); }
#intro-steps li.done::before { content: '· '; color: var(--accent); }

.drop { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(240,85,154,.04); border: 1px solid var(--accent); }
.drop p { color: var(--accent); font-size: 13px; }
.toast { position: fixed; top: 24px; left: 50%; transform: translateX(-50%); z-index: 40; background: var(--panel); border: 1px solid var(--line-2); padding: 10px 14px; animation: rise .3s; color: var(--ink); }

@media (max-width: 720px) {
  .legend, .hud .sub, .hint { display: none; }
  /* docked under the HUD, not over the ask bar: the field stays visible and nothing stacks on nothing else */
  .panel { left: 12px; right: 12px; width: auto; top: 150px; bottom: auto; max-height: 42vh; }
  .kudos { left: 12px; right: 12px; width: auto; top: 150px; bottom: auto; max-height: 42vh; }
}

.panel .grip { height: 14px; margin: -10px -22px 8px; cursor: grab; background: linear-gradient(var(--line-2), var(--line-2)) center / 28px 2px no-repeat; }
.panel .grip:active { cursor: grabbing; }
.legend .switch { pointer-events: auto; margin-top: 8px; align-self: flex-end; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; background: transparent; border: 1px solid var(--line-2); color: var(--ink-3); padding: 5px 9px; cursor: pointer; }
.legend .switch.on { color: var(--accent); border-color: var(--accent); }
.matches { width: 100%; background: var(--panel); backdrop-filter: blur(14px); border: 1px solid var(--line); display: flex; flex-direction: column; }
.matches button { display: flex; gap: 12px; align-items: baseline; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); padding: 9px 14px; cursor: pointer; font-size: 13px; }
.matches button:last-child { border-bottom: 0; }
.matches button:hover { background: rgba(230,232,238,.05); }
.matches b { font-weight: 500; white-space: nowrap; }
.matches span { color: var(--ink-3); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask .matches { display: flex; }

body.pre .hud, body.pre .legend, body.pre .ask, body.pre .hint { visibility: hidden; }

.seg.small { margin-top: 10px; align-self: flex-end; pointer-events: auto; }
.seg.small button { padding: 5px 9px; }
.kudos { position: fixed; bottom: 34px; left: 26px; width: 340px; max-height: 56vh; overflow: auto; z-index: 6; background: rgba(30,24,44,.97); backdrop-filter: blur(14px); border: 1px solid var(--line-2); border-left: 2px solid var(--accent); border-radius: 14px; padding: 16px 18px 18px; animation: rise .4s cubic-bezier(.2,.8,.2,1); box-shadow: 0 18px 50px rgba(0,0,0,.55); }
.kudos .close { position: absolute; top: 8px; right: 12px; background: none; border: 0; color: var(--ink-3); font-size: 20px; line-height: 1; cursor: pointer; }
.kudos .close:hover { color: var(--ink); }
.kudos .label { margin: 0 0 12px; color: var(--ink-3); }
.kudos article { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); cursor: pointer; }
.kudos article:hover h3 { color: var(--accent); }
.kudos img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line-2); flex: none; }
.kudos h3 { margin: 0; font-size: 14px; font-weight: 500; }
.kudos .meta { margin: 3px 0 8px; font-size: 10px; }
.kudos blockquote { margin: 0; padding: 0; border: 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

.enter:disabled { opacity: .55; cursor: default; }
.intro .enter.continue { display: inline-flex; align-items: center; gap: 11px; font-family: var(--sans); font-size: 15px; letter-spacing: 0; text-transform: none; font-weight: 500; background: #fff; color: #0b0d12; border-radius: 999px; padding: 7px 22px 7px 7px; }
.intro .enter.continue:hover { background: #e9edf4; }
.intro .btn-face { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: #d5d9e0; flex: none; }

/* entering the map: drop the pitch, keep only the loading steps */
.intro-card.entering .kicker,
.intro-card.entering h2,
.intro-card.entering .lede,
.intro-card.entering .how,
.intro-card.entering .enter,
.intro-card.entering .face,
.intro-card.entering .fine { display: none; }
.intro-card.entering { text-align: left; max-width: 340px; }
.intro-card.entering .loading { margin-top: 0; }

/* the map, made friendlier: Switzer everywhere, sentence case, soft corners, the three stones as the color */
.mono, .stats, .legend, .label, .meta, #intro-line, #intro-steps, .hint, .drop p, .toast,
.seg button, .small.link, .ghost, .pills-label, .answer-q, .answer.thinking p, .mini, .bar button,
.intro .kicker, .intro .enter, .legend .switch, .who .meta, .kudos .meta { text-transform: none !important; letter-spacing: 0 !important; font-family: var(--sans) !important; }
.stats dt, .pills-label, .label, .answer-q, .meta, .hint { font-size: 12px !important; }
.legend { font-size: 13px; }
.panel, .kudos, .matches, .loadbox, .toast { border-radius: 20px; }
.panel { border-color: var(--line-2); box-shadow: 0 24px 60px rgba(8,4,20,.55); }
.answer { border-left: 1px solid var(--line-2); border-radius: 20px; box-shadow: 0 24px 60px rgba(8,4,20,.5); }
.answer::before { content: ''; position: absolute; left: 20px; right: 20px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, #8A5CF0, #F0559A, #2ECC8A); }
.pills-wrap, .bar { border-radius: 20px; box-shadow: 0 24px 60px rgba(8,4,20,.5); }
.bar { border-radius: 999px; padding-left: 20px; }
.bar button, .ghost, .mini, .legend .switch, .seg button { border-radius: 999px; }
.bar button { background: linear-gradient(120deg, #8A5CF0, #F0559A); border: 0; color: #fff; padding: 9px 18px; font-weight: 600; font-size: 14px; }
.bar button:hover { color: #fff; filter: brightness(1.12); }
.pills button { border-radius: 999px; font-family: var(--sans); font-size: 13px; }
.pills button.on { background: rgba(240,85,154,.18); }
.ties button { border-radius: 999px; }
.seg { border-radius: 999px; overflow: hidden; }
.intro h2 { font-weight: 700; letter-spacing: -.02em; font-size: 40px; }
.intro .enter { border-radius: 999px; background: linear-gradient(120deg, #8A5CF0, #F0559A); color: #fff; font-weight: 600; font-size: 15px; padding: 13px 24px; }
.intro .enter:hover { background: linear-gradient(120deg, #9d74f5, #f56fab); }
.intro .enter.continue { background: #fff; color: #16121f; }
.intro .kicker { font-size: 13px; }
.brand .dot { background: linear-gradient(120deg, #8A5CF0, #F0559A, #2ECC8A); box-shadow: 0 0 14px rgba(240,85,154,.7); width: 9px; height: 9px; }
.hud h1 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.sw-tie { box-shadow: 0 0 8px var(--accent); }

/* legibility, pink is for borders and fills, text on the dark panels stays light */
.pills-label, .answer-q, .ties .label, .kudos .label { color: var(--ink-2); }
.pills button { color: var(--ink); background: rgba(245,240,251,.10); border-color: rgba(245,240,251,.30); }
.pills button:hover, .pills button.on { color: #fff; border-color: var(--accent); background: rgba(240,85,154,.30); }
.ties button:hover, .ghost:hover, .small.link:hover, .kudos article:hover h3 { color: #ffb3d3; }
.ghost:hover, .ties button:hover { border-color: var(--accent); }
.hint, .stats dt, .legend, .who .meta, .kudos .meta { color: var(--ink-2); }
.hud .sub { color: var(--ink); opacity: .85; }

/* one calm stack, chips float, no box around them */
.pills-wrap { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.pills { justify-content: center; }
.pills button { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: rgba(30,24,44,.72); }
.pills button:hover, .pills button.on { background: rgba(120,40,84,.85); }
.ask { gap: 14px; }

.answer { border: 1px solid var(--line); border-radius: 28px; padding: 20px 26px; background: rgba(30,24,44,.84); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.answer::before { display: none; }
.answer p { padding-right: 70px; }
.mini { border: 0; background: rgba(245,240,251,.10); padding: 6px 12px; font-size: 12px; }
.bar { background: rgba(30,24,44,.84); border: 1px solid var(--line); }

/* chips ride in one quiet row above the prompt. The answer and the input are a single surface. */
.ask { display: flex; flex-direction: column; gap: 0; background: none; border: 0; padding: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 0; }
.ask .pills-wrap { order: -1; margin: 0 0 10px; padding: 0 !important; background: none !important; border: 0 !important; }
.ask .pills { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; gap: 8px; scrollbar-width: none; -ms-overflow-style: none; padding: 2px 18px 2px 2px; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.ask .pills::-webkit-scrollbar { display: none; }
.ask .pills button { flex: none; white-space: nowrap; background: rgba(30,24,44,.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-color: rgba(245,240,251,.24); }
.ask .pills button:hover, .ask .pills button.on { background: rgba(120,40,84,.88); }
.ask .answer { background: rgba(30,24,44,.9); border: 1px solid var(--line-2); border-bottom: 0; border-radius: 28px 28px 0 0; box-shadow: none; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); padding: 18px 24px 12px; max-height: 32vh; }
.ask .answer p { padding-right: 76px; }
.ask .bar { background: rgba(30,24,44,.9); border: 1px solid var(--line-2); border-radius: 999px; box-shadow: 0 24px 60px rgba(8,4,20,.5); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.ask .answer:not([hidden]) ~ .bar { border-top: 1px solid var(--line); border-radius: 0 0 30px 30px; }
.ask .matches { background: rgba(30,24,44,.9); border: 1px solid var(--line-2); border-bottom: 0; border-radius: 22px 22px 0 0; }

/* round faces, never squeezed by the row they sit in */
.who img, .kudos img, .intro .face, .intro .btn-face { flex: none; aspect-ratio: 1 / 1; object-fit: cover; }
.who img { width: 56px; height: 56px; min-width: 56px; }
.who img.logo { object-fit: contain; }
.panel { padding: 22px 24px; }
.panel .who h2 { font-size: 18px; font-weight: 600; }

/* the card's actions read as buttons, the ties stay chips, the quote loses its stray rule */
.panel blockquote, .kudos blockquote { border-left: 0; padding-left: 0; }
.panel blockquote { font-size: 14px; line-height: 1.65; color: var(--ink); opacity: .92; }
.panel-actions { gap: 10px; }
.panel-actions .ghost { border-radius: 14px; padding: 12px 18px; font-size: 14px; font-weight: 600; border: 1px solid var(--line-2); background: rgba(245,240,251,.08); color: var(--ink); }
.panel-actions .ghost:first-child { border: 0; background: linear-gradient(120deg, #8A5CF0, #F0559A); color: #fff; }
.panel-actions .ghost:hover { color: #fff; filter: brightness(1.12); border-color: var(--accent); }

/* borders step back, surfaces are told apart by fill and shadow, not outlines */
:root { --line: rgba(245,240,251,.06); --line-2: rgba(245,240,251,.10); }
.panel, .kudos, .matches, .loadbox, .toast, .ask .answer, .ask .bar, .ask .matches, .seg, .legend .switch, .ghost, .mini, .ties button, .pills button, .ask .pills button, .panel-actions .ghost, .bar button, .who img, .kudos img, #trails { border-color: transparent !important; }
.ask .answer:not([hidden]) ~ .bar { border-top: 1px solid rgba(245,240,251,.06) !important; }
.ties button, .pills button, .ask .pills button { background: rgba(245,240,251,.09); }
.ask .pills button { background: rgba(38,30,56,.82); }
.panel { background: rgba(30,24,44,.94); }
.panel-actions .ghost { background: rgba(245,240,251,.09); }
.panel-actions .ghost:first-child { background: linear-gradient(120deg, #8A5CF0, #F0559A); }
.who img { border: 0 !important; box-shadow: 0 0 0 2px rgba(240,85,154,.55); }
.pills button:hover, .pills button.on, .ties button:hover { border-color: transparent !important; }
.ask .pills button.on, .ask .pills button:hover { background: rgba(150,48,104,.9); }
.hud .seg { background: rgba(245,240,251,.07); }
.seg button.on { background: rgba(245,240,251,.14); }
#trails, .legend .switch { background: rgba(245,240,251,.07); }

/* room to breathe, no rule between the reply and the field */
.ask .answer:not([hidden]) ~ .bar { border-top: 0 !important; }
.ask .answer { padding: 22px 28px 16px; }
.ask .bar { padding: 9px 10px 9px 24px; min-height: 66px; gap: 14px; }
.ask .answer:not([hidden]) ~ .bar { border-radius: 0 0 34px 34px; padding-bottom: 12px; padding-right: 14px; }
.ask .bar button { padding: 11px 22px; }
.mini { top: 18px; right: 22px; }

@media (max-width: 720px) { .ask { bottom: 78px; width: calc(100vw - 24px); } .ask .answer { padding: 18px 20px 12px; } .mini { top: 14px; right: 16px; } }

/* the prompt rides above the Back and Why buttons whenever the window is narrow enough to meet them */
@media (max-width: 1240px) { .ask { bottom: 78px; } }

.ask .bar { padding-left: 26px; }

/* one quiet switch, no legend */
.legend { top: 24px; right: 26px; }
.legend .switch { margin: 0; display: inline-flex; align-items: center; gap: 12px; padding: 8px 10px 8px 16px; font-size: 14px !important; font-weight: 500; color: var(--ink) !important; background: rgba(245,240,251,.10); border: 0 !important; border-radius: 999px; }
.legend .switch::after { content: ''; width: 34px; height: 20px; border-radius: 999px; background: rgba(245,240,251,.28) radial-gradient(circle at 10px 10px, #fff 8px, transparent 8.5px); transition: background-color .25s, background-position .25s; }
.legend .switch.on::after { background: #F0559A radial-gradient(circle at 24px 10px, #fff 8px, transparent 8.5px); }
.legend .switch.on { color: var(--ink); }
.legend .switch { background: rgba(30,24,44,.62); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); }
.hud .seg { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); background: rgba(30,24,44,.62); }
/* anything that floats over the field gets a soft blurred backing so it always reads */
.hud { top: 16px; left: 18px; padding: 12px 18px 14px; border-radius: 24px; background: rgba(30,24,44,.5); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); }
.hud .seg { background: rgba(245,240,251,.10); }
.toast, .loadbox, .matches { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
@media (max-width: 720px) { .hud { top: 10px; left: 10px; } }

/* a mask on the chip row would switch off the blur behind the chips, so the row scrolls plain */
.ask .pills { -webkit-mask-image: none; mask-image: none; padding-right: 2px; }
.ask .pills button, .ask .bar, .ask .answer, .panel, .kudos, .hud, .legend .switch { -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25); }
.ask .pills button { background: rgba(30,24,44,.70); }
.ask .pills button:hover, .ask .pills button.on { background: rgba(140,44,98,.86); }

/* a card shows initials when there is no photo, the same as that face on the map */
.who .initials { flex: none; width: 56px; height: 56px; min-width: 56px; border-radius: 50%; display: grid; place-items: center; background: #251d38; font-weight: 700; font-size: 19px; letter-spacing: .02em; }
.who .initials[hidden] { display: none; }
#p-meta:empty, #p-title:empty { display: none; }
.panel-actions:not(:has(> :not([hidden]))) { display: none; }

/* phones: an open card or the kudos list is the only thing over the map. It rises from where the prompt sits
   and scrolls inside itself. The stats, the chips and the prompt come back when it closes. */
@media (max-width: 720px) {
  .hud, .ask { transition: opacity .2s ease, visibility .2s; }
  body.sheet .hud, body.sheet .ask { opacity: 0; visibility: hidden; pointer-events: none; }
  body.answering .hud .stats { display: none; }
  .panel, .kudos { left: 12px !important; right: 12px !important; width: auto !important; top: auto !important; bottom: var(--sheet-bottom, 16px) !important; border-radius: 24px; overscroll-behavior: contain; }
  .panel { max-height: 58%; }
  .kudos { max-height: 70%; }
}

/* phones: the card and the kudos list keep their handle and close at the top while the rest scrolls.
   The close is a full thumb target, and the handle pulls the card down to close it. */
@media (max-width: 720px) {
  .panel:not([hidden]), .kudos:not([hidden]) { display: flex; flex-direction: column; overflow: hidden; }
  .panel .panel-body, .kudos #kudos-list { overflow: auto; min-height: 0; overscroll-behavior: contain; }
  .panel .grip { flex: none; height: 34px; margin: -22px -24px 0; background: none; touch-action: none; cursor: grab; }
  .panel .grip::before { content: ''; display: block; width: 40px; height: 5px; border-radius: 3px; background: rgba(245,240,251,.34); margin: 12px auto 0; }
  .panel .close, .kudos .close { width: 44px; height: 44px; top: 2px; right: 4px; display: grid; place-items: center; padding: 0; font-size: 30px; line-height: 1; color: var(--ink); z-index: 2; }
  .panel .who { padding-right: 24px; }
  .kudos .label { padding-right: 40px; }
}