.walkthrough { --walk-ink: #263e33; --walk-muted: #5a695f; margin: 0 auto 40px; max-width: 1056px; border: 1px solid #b9c6b6; border-radius: 18px; background: #f7f8f1; color: var(--walk-ink); overflow: hidden; }
.walk-title { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 28px; border-bottom: 1px solid #d5ddce; }
.walk-title h3 { margin: 0; font-size: 23px; font-weight: 550; letter-spacing: -.025em; line-height: 1.3; }
.walk-title > span { flex: none; font-size: 11px; letter-spacing: .12em; color: var(--walk-muted); }
.walk-scene { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: center; min-height: 375px; padding: 24px; background: #edf1e6; }
.walk-scene svg { width: 22px; height: 22px; flex: none; }
.walk-plan { min-width: 0; overflow: hidden; border: 1px solid #c8d2c2; border-radius: 10px; background: #fffefa; box-shadow: 0 10px 30px #243a2e0a; }
.walk-plan-heading { display: flex; align-items: center; gap: 15px; padding: 17px 16px; background: #e1e8d9; font-size: 13px; }
.walk-window-dots { font-size: 8px; letter-spacing: 3px; color: #7b8b72; }
.walk-grid-head { display: grid; grid-template-columns: 30% repeat(4, 1fr); padding: 13px 12px; color: #6a746a; font-size: 10px; border-bottom: 1px solid #e0e4da; }
.walk-grid-head > span:not(:first-child) { text-align: center; }
.walk-plan-row { display: grid; grid-template-columns: 30% 70%; padding: 12px; border-bottom: 1px solid #e6e9df; transition: background .6s; }
.walk-person { display: flex; gap: 7px; align-items: center; font-size: 12px; }
.walk-person svg { width: 18px; color: #6a7b62; }
.walk-track { display: flex; min-height: 30px; align-items: center; background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), #e6e9df calc(25% - 1px) 25%); }
.walk-assignment { display: flex; justify-content: center; align-items: center; height: 28px; border-radius: 4px; background: #dce8d2; font-size: 10px; }
.walk-assignment-0 { width: 25%; background: #769f77; color: #fff; }
.walk-assignment-1 { width: 50%; margin-left: 25%; }
.walk-assignment-2 { width: 75%; margin-left: 25%; }
.walk-extension { display: grid; place-items: center; width: 75%; height: 28px; border: 1px dashed #bd7746; background: #fff0df; color: #884622; border-radius: 4px; font-size: 11px; transform: scaleX(0); transform-origin: left; opacity: 0; transition: transform 1s cubic-bezier(.2,.7,.2,1), opacity .5s; }
.walk-need { display: flex; align-items: center; gap: 9px; min-height: 63px; padding: 12px; background: #fcf0df; border-top: 1px dashed #c39163; transition: background .7s; }
.walk-need-icon { display: grid; place-items: center; width: 25px; height: 25px; flex: none; border-radius: 50%; background: #e9c6a4; color: #79411f; }
.walk-need small, .walk-need strong { display: block; font-size: 10px; line-height: 1.6; }
.walk-need strong { font-size: 12px; font-weight: 550; }
.walk-need-person { display: flex; align-items: center; gap: 3px; margin-left: auto; font-size: 12px; opacity: 0; transform: translateX(10px); transition: opacity .7s, transform .7s; }
.walk-plan-foot { display: flex; align-items: center; gap: 6px; min-height: 37px; padding: 9px 12px; font-size: 9px; color: var(--walk-muted); }
.walk-status-dot { width: 5px; height: 5px; border-radius: 50%; background: #73876c; flex: none; }
.walkthrough-ai .walk-need { display: none; }
.walk-agent { min-width: 0; padding: 19px; border-radius: 12px; background: #293f34; color: #f5f6ed; box-shadow: 0 14px 28px #243b2b1c; }
.walk-agent-brand { display: flex; gap: 9px; align-items: center; font-size: 13px; }
.walk-agent-brand svg, .walk-match-heading svg { color: #ee9b68; }
.walk-agent-brand > span { margin-left: auto; border: 1px solid #7d927c; border-radius: 12px; padding: 4px 8px; font-size: 9px; }
.walk-prompt { display: flex; align-items: center; gap: 12px; margin: 20px 0 14px 20px; padding: 14px; border-radius: 10px 10px 2px 10px; background: #4c5f4d; color: #fffefa; font-size: 13px; line-height: 1.6; }
.walk-prompt > span { flex: none; font-size: 18px; color: #f2bd95; }
.walk-checking { position: relative; padding: 3px 0 3px 19px; font-size: 11px; color: #e0e9d9; opacity: .38; transition: opacity .5s; }
.walk-checking small { display: block; margin-top: 5px; color: #b9c9b4; font-size: 10px; }
.walk-scan-dot { position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: #e7ae7e; }
.walk-proposal { margin-top: 14px; padding: 15px; border: 1px solid #9e8e6a; border-radius: 8px; opacity: .1; transform: translateY(8px); transition: opacity .7s, transform .7s; }
.walk-proposal > small { display: block; color: #f5c394; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.walk-proposal > strong { display: block; font-size: 14px; margin-top: 9px; }
.walk-date-label { margin-top: 12px; font-size: 9px; color: #c2d0bc; }
.walk-date-change { display: flex; align-items: center; gap: 12px; margin-top: 5px; font-size: 15px; }
.walk-date-change s { color: #c3cdbf; font-size: 13px; }
.walk-date-change em { font-style: normal; font-size: 10px; padding: 3px 6px; background: #efbc85; color: #3e3425; border-radius: 12px; }
.walk-choice { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; opacity: .45; transition: opacity .5s; }
.walk-choice > span { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid #a4b49b; border-radius: 5px; font-size: 11px; }
.walk-choice > span:first-child { background: #d3e4af; color: #304126; }
.walk-choice svg { width: 13px; height: 13px; }
.walk-decision { display: flex; align-items: center; gap: 7px; margin: 12px 0 0; font-size: 11px; line-height: 1.5; opacity: 0; transform: translateY(5px); transition: opacity .5s, transform .5s; }
.walk-decision svg { width: 16px; height: 16px; }
.walk-matching { min-width: 0; padding: 20px; border: 1px solid #c7d2bd; border-radius: 12px; background: #fffefa; }
.walk-match-heading { display: flex; gap: 9px; align-items: center; font-size: 14px; }
.walk-match-criteria { margin: 10px 0 18px; font-size: 11px; color: var(--walk-muted); }
.walk-candidates { display: grid; gap: 8px; }
.walk-candidate { display: flex; gap: 10px; align-items: center; padding: 11px; border: 1px solid #dce2d4; border-radius: 8px; opacity: .3; transform: translateY(8px); transition: opacity .6s, transform .6s, background .6s, border-color .6s; }
.walk-candidate-1 { transition-delay: .12s; }
.walk-candidate-2 { transition-delay: .24s; }
.walk-avatar { display: grid; place-items: center; width: 32px; height: 32px; flex: none; background: #eaf0e2; border-radius: 50%; }
.walk-candidate strong { display: block; font-size: 13px; font-weight: 550; }
.walk-candidate small { display: block; margin-top: 4px; font-size: 10px; color: var(--walk-muted); }
.walk-fit { margin-left: auto; color: #3e6e47; font-size: 17px; }
.walk-match-result { display: flex; gap: 12px; align-items: center; padding: 13px; margin-top: 14px; border: 1px dashed #a0b690; border-radius: 8px; background: #f0f5e6; opacity: .2; transform: translateY(8px); transition: opacity .7s, transform .7s; }
.walk-match-result strong, .walk-match-result small { display: block; }
.walk-match-result strong { font-size: 14px; margin: 5px 0; }
.walk-match-result small { font-size: 10px; color: var(--walk-muted); }
.walkthrough-resources .walk-assignment-0 { width: 100%; color: #4d6a42; border: 1px dashed #8ca47c; background: #f4f8ec; }
.walkthrough[data-step="1"] .walk-checking { opacity: 1; }
.walkthrough:is([data-step="2"], [data-step="3"]) :is(.walk-proposal, .walk-extension, .walk-match-result) { opacity: 1; transform: none; }
.walkthrough:is([data-step="1"], [data-step="2"], [data-step="3"]) .walk-candidate { opacity: 1; transform: none; }
.walkthrough:is([data-step="2"], [data-step="3"]) :is(.walk-candidate-0, .walk-selected-row) { background: #eaf2df; border-color: #8ba376; }
.walkthrough[data-step="3"] :is(.walk-choice, .walk-decision, .walk-need-person) { opacity: 1; transform: none; }
.walkthrough[data-step="3"] .walk-need { background: #eaf2df; }
.walk-controls { display: flex; align-items: stretch; gap: 14px; padding: 20px 24px 0; }
.walk-controls[hidden] { display: none; }
.walk-steps { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
.walk-controls button { font: inherit; cursor: pointer; color: var(--walk-ink); border-radius: 6px; }
.walk-steps button { display: flex; align-items: flex-start; gap: 8px; min-height: 48px; padding: 8px; border: 1px solid transparent; background: transparent; text-align: left; font-size: 13px; line-height: 1.5; }
.walk-steps button > span:first-child { color: #7a5635; font-variant-numeric: tabular-nums; }
.walk-steps button[aria-current] { background: #e6ecd9; border-color: #bdcbaa; }
.walk-steps button:hover { background: #eaf0e1; }
.walk-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 104px; min-height: 44px; padding: 10px; border: 1px solid #a4b294; background: #fffefa; font-size: 12px !important; }
.walk-controls button:focus-visible, .walk-transcript summary:focus-visible { outline: 3px solid #b65e32; outline-offset: 3px; }
.walk-progress { height: 2px; margin: 16px 28px; background: #dfe6d5; }
.walk-progress > span { display: block; height: 100%; background: #a3623c; transform: scaleX(0); transform-origin: left; }
.walk-caption { min-height: 3.3em; margin: 0; padding: 0 28px; font-size: 15px; line-height: 1.65; color: var(--walk-ink); }
.walk-note { margin: 12px 0 0; padding: 0 28px; font-size: 11px; line-height: 1.6; color: var(--walk-muted); }
.walk-transcript { margin: 10px 28px 22px; font-size: 12px; color: var(--walk-muted); }
.walk-transcript summary { display: list-item; width: fit-content; min-height: 34px; padding: 7px 0; cursor: pointer; }
.walk-transcript ol { margin: 10px 0 0; padding-left: 20px; }
.walk-transcript li { padding: 5px 0; }
.walk-transcript p { margin: 4px 0 8px; line-height: 1.6; }
.agent-recording { max-width: 1056px; margin: 25px auto 0; border-top: 1px solid #8ca39266; }
.agent-recording > summary { width: fit-content; min-height: 44px; padding: 18px 0; cursor: pointer; font-size: 14px; }
.agent-recording .agent-cinema { margin-top: 10px; }
@media (max-width: 760px) {
  .walk-title { padding: 20px; }
  .walk-title h3 { font-size: 21px; }
  .walk-title > span { display: none; }
  .walk-scene { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 18px; min-height: 0; }
  .walkthrough-ai .walk-plan { display: none; }
  .walk-agent, .walk-matching { padding: 14px; }
  .walk-prompt { margin: 14px 0 10px; padding: 11px; }
  .walk-proposal { padding: 12px; margin-top: 10px; }
  .walk-checking small { display: none; }
  .walk-candidate small { font-size: 12px; }
  .walkthrough-resources .walk-plan-row:not(.walk-selected-row) { display: none; }
  .walkthrough-resources .walk-plan-foot { display: none; }
  .walkthrough-resources .walk-candidate-2 { display: none; }
  .walk-controls { flex-wrap: wrap; gap: 12px; padding: 16px 18px 0; }
  .walk-steps { flex-basis: 100%; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .walk-steps button { font-size: 12px; }
  .walk-toggle { min-width: 112px; }
  .walk-caption { min-height: 5em; padding: 0 20px; font-size: 14px; }
  .walk-note { padding: 0 20px; }
  .walk-progress { margin: 15px 20px; }
  .walk-transcript { margin-inline: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .walkthrough *, .walkthrough *::before, .walkthrough *::after { transition: none !important; animation: none !important; }
}
@media print {
  .walk-controls, .walk-scene, .walk-progress, .walk-caption { display: none !important; }
  .walk-transcript::details-content { display: block; }
}