.guide-page { --guide-wash:#eeece8; }
.guide-intro { background:var(--wine); color:var(--paper); padding-block:44px; }
.guide-intro .eyebrow { color:var(--yellow); margin-bottom:16px; }
.guide-intro h1 { font-size:clamp(2.8rem,5.6vw,4.6rem); line-height:1.05; }
.guide-intro h1 span { color:var(--yellow); }
.guide-intro .container>p:last-child { max-width:580px; font-size:1.125rem; margin-top:20px; color:#efe0e3; }
.guide-section { padding-block:44px; }
.guide-section>h2 { margin-bottom:24px; }
.entry-choices { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px; }
.entry-choices button,.message-types button { min-height:48px; padding:10px 20px; border:1px solid var(--line); background:#fff; color:var(--wine); font-weight:700; border-radius:24px; cursor:pointer; }
.entry-choices button[aria-pressed="true"],.message-types button[aria-pressed="true"] { border-color:var(--wine); background:var(--wine); color:#fff; }
.entry-choices button:hover,.message-types button:hover { border-color:var(--wine); }
.entry-panel { display:grid; grid-template-columns:1fr 1fr; background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.entry-figure { margin:0; display:grid; place-items:center; padding:38px 30px; background:var(--yellow); }
.entry-flow { display:grid; grid-template-columns:1fr 28px 1.2fr 28px 1fr; align-items:center; width:100%; gap:8px; color:var(--wine-dark); }
.flow-node { text-align:center; font-size:1rem; font-weight:700; overflow-wrap:anywhere; }
.flow-symbol { border:1px solid #6e0a1a35; width:66px; height:66px; border-radius:50%; display:grid; place-items:center; margin:0 auto 12px; font-size:1.8rem; background:#ffffff50; }
.flow-node-center .flow-symbol { width:78px; height:78px; background:var(--wine); color:var(--yellow); border-color:var(--wine); }
.flow-connector { height:2px; background:#6e0a1a60; position:relative; margin-top:-32px; }
.flow-connector::after { content:""; display:block; position:absolute; top:-3px; left:0; width:8px; height:8px; border-radius:50%; background:var(--wine); }
.entry-panel.is-changing .flow-connector::after { animation:guide-connection .65s ease-out both; }
.entry-panel.is-changing .flow-node-center .flow-symbol { animation:guide-node .45s ease-out; }
.entry-copy { padding:30px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.entry-tag { font-size:.875rem; color:var(--wine); font-weight:700; letter-spacing:.08em; margin-bottom:10px; }
.entry-copy h3 { font-size:1.45rem; letter-spacing:-.035em; margin-bottom:12px; }
.entry-description>p:last-child { color:var(--muted); min-height:72px; }
.entry-copy .button { margin-top:22px; }
.story-section { background:var(--guide-wash); }
.story-heading { display:flex; justify-content:space-between; align-items:center; gap:32px; margin-bottom:30px; }
.story-heading>p { max-width:430px; color:var(--muted); }
.story-layout { display:grid; grid-template-columns:1fr 1fr; gap:46px; align-items:center; }
.message-types { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:24px; }
.story-steps { display:flex; gap:10px; margin-bottom:24px; }
.story-steps button { flex:1; min-height:48px; display:flex; justify-content:center; align-items:center; gap:8px; padding:10px; background:transparent; border:1px solid #b9b0b2; border-radius:8px; cursor:pointer; font-weight:700; color:var(--wine); }
.story-steps button[aria-pressed="true"] { border-color:var(--wine); background:var(--wine); color:#fff; }
.story-steps button>span { font-size:.875rem; }
.story-explanation h3 { font-size:1.35rem; letter-spacing:-.025em; margin-bottom:10px; }
.story-explanation p { color:var(--muted); min-height:72px; }
.message-demo { margin:0; }
.message-demo figcaption { font-size:.875rem; color:var(--muted); margin-bottom:10px; }
.message-card { background:#fff; padding:24px; border:1px solid var(--line); border-radius:16px; box-shadow:8px 8px 0 #6e0a1a0a; transition:transform .4s,border-color .4s; }
.message-card-top { display:flex; align-items:center; gap:10px; font-size:.875rem; font-weight:700; }
.message-card-top img { border-radius:50%; width:36px; height:36px; }
.sender-label { margin-left:auto; font-size:.875rem; font-weight:400; color:var(--muted); }
.message-bubble { padding:18px; margin-top:18px; background:var(--wine); color:#fff; border-radius:12px 12px 3px 12px; transition:background .4s,transform .4s; }
.message-reply { display:flex; align-items:center; gap:10px; margin-top:16px; max-height:0; overflow:hidden; opacity:0; transform:translateY(15px); transition:max-height .4s,opacity .4s,transform .4s; }
.message-reply p { background:var(--yellow); color:var(--wine-dark); border-radius:12px 12px 12px 3px; padding:12px 16px; }
.reply-avatar { width:36px; height:36px; flex:0 0 36px; display:grid; place-items:center; color:var(--wine); border:1px solid var(--line); border-radius:50%; font-size:1.4rem; }
.message-caption { color:var(--muted); font-size:.875rem; margin-top:16px; }
.connection-people { display:flex; justify-content:center; align-items:center; gap:16px; margin-top:24px; font-size:.875rem; color:var(--wine); }
.connection-people>span:not(.people-line) { background:#fff; border:1px solid #6e0a1a40; border-radius:24px; padding:10px 16px; }
.people-line { width:60px; height:2px; background:#6e0a1a30; position:relative; }
.people-line::after { content:""; position:absolute; inset:0; background:var(--wine); transform:scaleX(0); transform-origin:left; transition:transform .5s; }
.message-demo[data-stage="1"] .message-card { border-color:var(--wine); transform:translateY(-4px); }
.message-demo[data-stage="1"] .message-bubble,.message-demo[data-stage="2"] .message-bubble { background:var(--paper); color:var(--ink); border-radius:12px; }
.message-demo[data-stage="2"] .message-reply { max-height:130px; opacity:1; transform:translateY(0); }
.message-demo[data-stage="2"] .people-line::after { transform:scaleX(1); }
.anonymity-note { font-size:.875rem; color:var(--muted); margin-top:28px; max-width:850px; }
.guide-faq details { border-bottom:1px solid var(--line); }
.guide-faq summary { padding:18px 4px; min-height:48px; cursor:pointer; font-weight:700; color:var(--wine); }
.guide-faq details p { padding:0 4px 20px; max-width:800px; }
.guide-faq>.button { margin-top:24px; }
.guide-fallback { padding-left:24px; margin-top:20px; }
.guide-fallback a { text-decoration:underline; text-underline-offset:3px; }
@keyframes guide-connection { from { left:0; opacity:.4; } to { left:calc(100% - 8px); opacity:1; } }
@keyframes guide-node { from { transform:scale(.9); } to { transform:scale(1); } }
@media (max-width:900px) {
  .entry-panel { grid-template-columns:1fr; }
  .entry-figure { padding:30px; }
  .entry-flow { max-width:520px; }
  .entry-description>p:last-child { min-height:0; }
  .story-layout { gap:28px; }
  .story-steps { flex-wrap:wrap; }
  .story-steps button { flex:1 1 100px; }
  .message-card { padding:20px; }
}
@media (max-width:600px) {
  .guide-intro { padding-block:32px; }
  .guide-intro h1 { font-size:clamp(2.7rem,11vw,3.7rem); }
  .guide-intro .container>p:last-child { font-size:1rem; }
  .guide-intro .eyebrow { font-size:.875rem; letter-spacing:.04em; }
  .guide-section { padding-block:34px; }
  .entry-choices { gap:8px; }
  .entry-choices button { flex:1 1 calc(33% - 8px); padding-inline:14px; }
  .entry-figure { padding:24px 16px; }
  .entry-flow { grid-template-columns:1fr 15px 1.2fr 15px 1fr; gap:4px; }
  .flow-symbol { width:48px; height:48px; font-size:1.5rem; }
  .flow-node-center .flow-symbol { width:60px; height:60px; }
  .flow-connector { margin-top:-40px; }
  .entry-copy { padding:24px; }
  .entry-copy h3 { font-size:1.35rem; }
  .entry-copy .button { width:100%; font-size:.9375rem; }
  .story-heading { flex-direction:column; align-items:flex-start; gap:16px; }
  .story-layout { grid-template-columns:1fr; gap:24px; }
  .message-types button { flex:1; padding-inline:12px; font-size:.9375rem; }
  .story-steps { gap:8px; }
  .story-steps button { flex:1; font-size:.875rem; gap:6px; padding:10px 6px; }
  .story-explanation p { min-height:0; }
  .message-card { padding:20px; }
  .message-card-top { flex-wrap:wrap; }
  .sender-label { width:100%; margin-left:46px; }
  .anonymity-note { margin-top:24px; }
}
@media (prefers-reduced-motion:reduce) {
  .guide-page *, .guide-page *::before, .guide-page *::after { animation:none!important; transition:none!important; }
}