.guide { --guide-ink: #1d211e; --guide-muted: #626b64; --guide-line: #1d211e24; --guide-paper: #fafaf8; --guide-tint: #f0f2ed; color: var(--guide-ink); font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; font-size: 16px; line-height: 1.65; min-width: 0; }
.guide *, .guide *::before, .guide *::after { box-sizing: border-box; }
.guide h2, .guide p { margin: 0; }
.guide :where(a, button, input, [tabindex]):focus-visible { outline: 2px solid var(--guide-ink); outline-offset: 5px; }
.guide-header { display: flex; justify-content: space-between; align-items: start; gap: 24px; padding-bottom: 30px; }
.guide-eyebrow { color: var(--guide-muted); font-size: 12px; line-height: 1.6; margin-bottom: 12px !important; }
.guide h2 { font-size: clamp(28px, 2.8vw, 36px); line-height: 1.15; font-weight: 500; letter-spacing: -.035em; }
.guide-source { display: flex; align-items: center; gap: 8px; color: var(--guide-muted); font-size: 12px; line-height: 1.6; margin-top: 14px !important; }
.guide-source i { display: block; flex: 0 0 7px; width: 7px; height: 7px; background: #638742; border-radius: 50%; }
.guide button { font: inherit; cursor: pointer; color: inherit; -webkit-tap-highlight-color: transparent; }
.guide-reset { flex: 0 0 auto; min-height: 44px; border: 0; border-bottom: 1px solid var(--guide-line); border-radius: 0; background: transparent; padding: 8px 0; font-size: 12px !important; line-height: 1.5; }
.guide-reset:hover { border-color: var(--guide-ink); }
.guide-log { display: flex; flex-direction: column; gap: 18px; max-height: min(520px, 58vh); min-height: 250px; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--guide-line); border-bottom: 1px solid var(--guide-line); padding: 28px 10px 28px 0; scrollbar-width: thin; scrollbar-color: #acb5a9 var(--guide-paper); }
.guide-message { width: fit-content; max-width: 88%; padding: 18px 22px; border-radius: 14px; background: var(--guide-tint); color: var(--guide-ink); overflow-wrap: anywhere; }
.guide-message-user { align-self: end; background: var(--guide-ink); color: #fafaf8; }
.guide-speaker { display: block; font-size: 11px; line-height: 1.5; margin-bottom: 8px; color: var(--guide-muted); }
.guide-message-user .guide-speaker { color: #d5dfd4; }
.guide-message > p { font-size: 16px; line-height: 1.65; white-space: pre-line; }
.guide-answer-links { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 14px; }
.guide-answer-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; line-height: 1.5; text-decoration: underline; text-underline-offset: 5px; color: inherit; }
.guide-answer-links a:hover { text-decoration-thickness: 2px; }
.guide-prompts { display: flex; flex-wrap: wrap; gap: 10px; padding: 22px 0 26px; }
.guide-prompts button { min-height: 44px; border: 1px solid var(--guide-line); border-radius: 24px; padding: 10px 17px; background: transparent; font-size: 13px; line-height: 1.5; }
.guide-prompts button:hover { background: var(--guide-tint); border-color: #1d211e70; }
.guide-form > label { display: block; font-size: 14px; margin-bottom: 10px; }
.guide-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.guide-entry input { min-width: 0; width: 100%; min-height: 50px; border: 1px solid #1d211e50; border-radius: 5px; padding: 12px 16px; color: var(--guide-ink); background: #fff; font: inherit; font-size: 16px; line-height: 1.5; }
.guide-entry input::placeholder { color: #6b736d; opacity: 1; }
.guide-entry input[aria-invalid=true] { border-color: #944638; }
.guide-submit { min-height: 50px; border: 1px solid var(--guide-ink); border-radius: 26px; padding: 12px 24px; background: var(--guide-ink); color: #fafaf8 !important; font-size: 14px !important; line-height: 1.5; }
.guide-submit:hover { background: #384b34; border-color: #384b34; }
.guide-error { color: #8b3e32; min-height: 0; font-size: 12px; line-height: 1.6; }
.guide-error:not(:empty) { margin-top: 10px !important; }
.guide-note { color: var(--guide-muted); font-size: 12px; line-height: 1.7; margin-top: 14px !important; max-width: 700px; }
.guide-results { display:grid; gap:14px; margin-top:18px; }
.guide-result { min-width:0; padding:18px; border:1px solid var(--guide-line); border-radius:9px; background:#fafaf8; }
.guide-result-kind { display:block; color:var(--guide-muted); font-size:11px; line-height:1.5; }
.guide-result-title { display:inline-flex; min-height:44px; align-items:center; font-size:19px; line-height:1.35; font-weight:500; text-decoration:underline; text-underline-offset:4px; }
.guide-result-excerpt { color:var(--guide-muted); font-size:14px; line-height:1.75; white-space:pre-line; }
.guide-result .guide-answer-links { gap:0 18px; margin-top:10px; }
.guide-message-guide:has(.guide-results) { width:100%; max-width:100%; }
.guide-answer-links button.guide-player-action { display:inline-flex; align-items:center; min-height:44px; max-width:100%; padding:8px 0; border:0; border-radius:0; background:transparent; font-size:13px; line-height:1.5; text-align:left; text-decoration:underline; text-underline-offset:5px; overflow-wrap:anywhere; }
.guide-answer-links button.guide-player-action:hover { text-decoration-thickness:2px; }
.guide-answer-links button.guide-player-action:disabled { opacity:.55; cursor:default; }
.guide-player-actions { display:flex; flex-wrap:wrap; gap:0 24px; }
@media (max-width: 600px) {
  .guide-header { flex-direction: column; gap: 14px; padding-bottom: 24px; }
  .guide-reset { align-self: start; }
  .guide-log { min-height: 230px; max-height: 440px; padding: 22px 6px 22px 0; gap: 14px; }
  .guide-message { max-width: 96%; padding: 16px 17px; border-radius: 11px; }
  .guide-message > p { font-size: 16px; }
  .guide-answer-links { display: block; margin-top: 12px; }
  .guide-answer-links a { display: flex; width: fit-content; font-size: 13px; }
  .guide-prompts { gap: 8px; padding-block: 20px 24px; }
  .guide-prompts button { padding-inline: 14px; font-size: 13px; }
  .guide-entry { grid-template-columns: 1fr; }
  .guide-submit { justify-self: start; padding-inline: 25px; }
}