/* Vesper-inspired scroll narrative, rebuilt for this site's square editorial system. */
.site-guide { --guide-paper:#eeeee6; --guide-muted:#b6b8ae; --guide-rule:#45473f; --guide-code:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace; color:var(--guide-paper); background:#0a0b0a; border-block:1px solid #292b26; }
.guide-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; align-items:start; padding-block:72px; }
.guide-copy { display:flex; flex-direction:column; min-width:0; }
.guide-kicker { display:flex; align-items:center; gap:12px; font:400 16px/1.5 var(--guide-code); letter-spacing:.08em; }
.guide-kicker>span { width:7px; height:7px; flex:0 0 7px; background:#bbcbb7; box-shadow:0 0 15px #b6d2ad35; }
.guide-copy h2 { margin-top:24px; font:500 var(--text-section)/1.3 var(--serif); letter-spacing:-.02em; }
.guide-intro { max-width:32em; margin-top:28px; color:var(--guide-muted); font:400 18px/1.7 var(--sans); }
.guide-steps { list-style:none; padding:0; margin:40px 0 0; }
.guide-step { position:relative; display:grid; grid-template-columns:40px minmax(0,1fr) 24px; gap:12px; align-items:center; width:100%; min-height:68px; padding:18px 0; border:0; border-top:1px solid #34362f; border-radius:0; background:transparent; color:var(--guide-muted); font:400 20px/1.5 var(--sans); text-align:left; }
.guide-step::before { position:absolute; content:''; inset:0 0 auto; height:1px; background:var(--guide-paper); transform:scaleX(var(--guide-fill,0)); transform-origin:left; transition:transform .2s ease-out; }
.guide-step-index { font:400 16px/1.5 var(--guide-code); font-variant-numeric:tabular-nums; }
.guide-step-arrow { font-size:22px; text-align:right; opacity:0; }
.guide-step[aria-current=step] { color:var(--guide-paper); }
.guide-step[aria-current=step] .guide-step-arrow { opacity:1; }
.guide-steps li:last-child { border-bottom:1px solid #34362f; }
.guide-contact { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:24px; padding-block:12px; color:var(--guide-muted); font-size:18px; }
.guide-window { display:flex; flex-direction:column; height:clamp(560px,78svh,820px); min-width:0; background:linear-gradient(145deg,#1d1e1b08,#030403 62%),linear-gradient(#171815,#070807 120px); border:1px solid var(--guide-rule); border-radius:0; box-shadow:0 22px 60px #0003; }
.guide-window-head { display:flex; flex:0 0 auto; align-items:center; justify-content:space-between; gap:20px; margin:0 28px; padding:26px 0; border-bottom:1px solid var(--guide-rule); }
.guide-status { font:500 clamp(30px,2.6vw,40px)/1.2 var(--sans); letter-spacing:-.045em; text-shadow:0 0 18px #ffffff26; }
.guide-demo-label { display:flex; flex-direction:column; align-items:flex-end; flex:0 0 auto; gap:4px; font:400 16px/1.5 var(--sans); color:var(--guide-muted); }
.guide-demo-label>span { font-variant-numeric:tabular-nums; }
.guide-chat-area { position:relative; flex:1; min-height:0; }
.guide-view { height:100%; min-width:0; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#55594e transparent; }
.guide-transcript { display:flex; flex-direction:column; justify-content:flex-end; min-height:100%; box-sizing:border-box; padding:32px 28px; }
.guide-case { display:flex; flex:0 0 auto; flex-direction:column; gap:28px; padding:0; }
.guide-case+.guide-case { margin-top:32px; }
.guide-case>.guide-message { margin-top:0; }
.guide-chat-area.has-history .guide-view { -webkit-mask-image:linear-gradient(to bottom,transparent,#000 28px); mask-image:linear-gradient(to bottom,transparent,#000 28px); }
.guide-case-heading { font:400 24px/1.4 var(--serif); margin-bottom:24px; }
.guide-user { width:92%; margin-left:auto; background:#e8e8e3; color:#1a1c18; padding:20px 24px; border:1px solid #f7f7f280; border-radius:18px 18px 4px 18px; box-shadow:0 0 28px #eeeee610; }
.guide-prompt-label { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:14px; color:#55594f; font:400 16px/1.5 var(--guide-code); letter-spacing:.06em; }
.guide-prompt-entry { display:grid; grid-template-columns:14px minmax(0,1fr); gap:12px; align-items:baseline; }
.guide-prompt-mark { color:#747b6b; font:500 20px/1.7 var(--guide-code); }
.site-guide .guide-prompt-entry p { font:400 20px/1.7 var(--guide-code); letter-spacing:.015em; }
.guide-speaker { display:block; font-size:16px; line-height:1.5; margin-bottom:8px; }
.guide-user p,.guide-answer p { font:400 20px/1.7 var(--sans); overflow-wrap:anywhere; }
.guide-trace { margin-top:32px; padding-left:18px; border-left:1px solid #2bd081; overflow-wrap:anywhere; }
.guide-trace>p { display:flex; align-items:baseline; gap:18px; font:400 18px/1.6 var(--guide-code); color:#35d68b; }
.guide-check-caret { color:#898d83; flex:0 0 auto; }
.guide-trace ul { list-style:none; padding:0; margin-top:10px; color:var(--guide-muted); }
.guide-trace li { font:400 18px/1.7 var(--guide-code); }
.guide-trace li+li { margin-top:6px; }
.guide-answer { margin-top:32px; }
.guide-answer .guide-speaker { color:var(--guide-muted); }
.guide-cta { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:56px; margin-top:28px; padding:14px 20px; border:1px solid #85897c; border-radius:0; color:var(--guide-paper); font:400 18px/1.5 var(--sans); }
.guide-cta>span:first-child { min-width:0; }
.guide-cta>span:last-child { flex:0 0 20px; }
.guide-window-foot { display:flex; flex:0 0 auto; align-items:center; justify-content:space-between; gap:20px; padding:18px 28px; border-top:1px solid var(--guide-rule); background:#141612; color:var(--guide-muted); font:400 16px/1.5 var(--sans); }
.guide-window-foot>span:first-child { max-width:50%; overflow-wrap:anywhere; }
.guide-window-foot>span:last-child { display:flex; align-items:center; gap:10px; }
.guide-window-foot i { width:6px; height:6px; flex:0 0 6px; background:#bbccb5; }
.guide-word { display:inline; }
.site-guide:not(.is-enhanced) .guide-steps { display:none; }
.site-guide.is-enhanced .guide-case-heading { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); }
.site-guide.is-enhanced .guide-case { border-top:0; }
.site-guide.is-pinned .guide-scroll { height:340svh; }
.site-guide.is-pinned .guide-stage { position:sticky; top:0; }
.site-guide.is-pinned .guide-layout { min-height:100svh; padding-block:40px; align-items:stretch; }
.site-guide.is-pinned .guide-copy,.site-guide.is-pinned .guide-window { height:calc(100svh - 80px); max-height:850px; }
.site-guide.is-pinned .guide-steps { margin-top:auto; padding-top:32px; }
.site-guide :is(a,button,[data-guide-log]):focus-visible { outline:2px solid var(--guide-paper); outline-offset:5px; }
.site-guide :is(a,button) { -webkit-tap-highlight-color:transparent; }
@media(hover:hover) and (pointer:fine) { .guide-step:hover,.guide-contact:hover { color:var(--guide-paper); } .guide-cta:hover { background:var(--guide-paper); color:#11140f; } }
@media(prefers-reduced-motion:no-preference) {
  .site-guide.is-visible .guide-message.is-entering { animation:guide-arrive .5s cubic-bezier(.22,1,.36,1) both; }
  .guide-trace.is-entering li { animation:guide-word-in .35s ease-out both; animation-delay:.24s; }
  .guide-trace.is-entering li:nth-child(2) { animation-delay:.5s; }
  .guide-answer.is-entering .guide-word { animation:guide-word-in .22s ease-out both; animation-delay:calc(.08s + var(--word-order)*.022s); }
  @keyframes guide-word-in { from { opacity:0; } to { opacity:1; } }
  @keyframes guide-arrive { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
}
@media(max-width:1099px) {
  .guide-layout { grid-template-columns:minmax(0,1fr); gap:40px; }
  .guide-copy h2 br { display:none; }
  .guide-intro { max-width:44em; }
  .guide-copy h2 { max-width:18em; }
  .guide-steps { margin-top:28px; }
}
@media(max-width:639px) {
  .guide-layout { padding-block:48px; gap:28px; }
  .guide-intro { margin-top:20px; }
  .guide-step { min-height:64px; grid-template-columns:28px minmax(0,1fr) 20px; gap:10px; font-size:18px; padding-block:16px; }
  .guide-window-head { margin-inline:20px; padding-block:22px; gap:16px; }
  .guide-status { font-size:26px; }
  .guide-window { height:clamp(540px,86svh,760px); }
  .guide-transcript { padding:24px 20px; }
  .guide-user { width:100%; padding:18px; }
  .guide-user p,.guide-answer p { font-size:18px; }
  .site-guide .guide-prompt-entry p { font-size:18px; }
  .guide-window-foot { flex-wrap:wrap; gap:12px; padding:18px 20px; }
  .guide-window-foot>span:first-child { max-width:100%; }
  .guide-contact { margin-top:18px; }
}
@media(prefers-reduced-motion:reduce) { .site-guide * { scroll-behavior:auto; animation:none!important; transition:none!important; } }
@media print { .site-guide .guide-scroll,.site-guide .guide-window { height:auto!important; } .site-guide .guide-stage { position:static!important; } .site-guide .guide-view { overflow:visible; mask-image:none; } .site-guide .guide-case[hidden],.site-guide .guide-message[hidden] { display:block!important; } }