/* A compact, illustrative product walkthrough. No remote media or runtime needed. */
.project-demo { --pd-ink:#302f2b; --pd-muted:#76746e; --pd-line:#e5e3df; --pd-paper:#fbfaf8; color:var(--pd-ink); width:100%; margin:0; }
.pd-window { border:1px solid var(--pd-line); border-radius:14px; background:#fff; box-shadow:0 16px 44px -28px #302f2b45; overflow:hidden; }
.pd-chrome { min-height:39px; display:flex; align-items:center; justify-content:space-between; padding:0 16px; border-bottom:1px solid var(--pd-line); background:#fff; font-size:11px; color:var(--pd-muted); }
.pd-chrome-brand { display:flex; align-items:center; gap:7px; color:var(--pd-ink); font-size:12px; font-weight:600; }
.pd-chrome-brand img { width:17px; height:17px; }
.pd-address { font-size:10px; letter-spacing:.02em; }
.pd-screen { display:grid; grid-template-columns:126px minmax(0,1fr); height:352px; position:relative; overflow:hidden; background:var(--pd-paper); font-family:Arial,Helvetica,sans-serif; }
.pd-sidebar { padding:17px 10px; border-right:1px solid var(--pd-line); background:#f4f3ef; font-size:10px; color:#64615b; }
.pd-sidebar-logo { font-family:Georgia,'Times New Roman',serif; font-size:22px; color:var(--pd-ink); margin:0 0 21px 7px; }
.pd-nav-row { display:flex; gap:8px; align-items:center; min-height:29px; padding:5px 8px; margin:3px 0; border-radius:6px; }
.pd-nav-row.is-active { background:#e9e7e1; color:#302f2b; font-weight:600; }
.pd-nav-icon { font-size:16px; width:14px; text-align:center; line-height:1; }
.pd-sidebar-label { margin:21px 8px 7px; font-size:8px; letter-spacing:.08em; color:#77736b; text-transform:uppercase; }
.pd-nav-project { font-size:9px; padding-left:9px; }
.pd-stage { position:relative; min-width:0; padding:24px 22px; }
.pd-stage h3 { font-size:21px; font-family:Georgia,'Times New Roman',serif; font-weight:400; margin:0; line-height:1.25; letter-spacing:-.015em; }
.pd-stage p { margin:0; }
.pd-projects-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pd-ui-button { display:inline-flex; align-items:center; justify-content:center; gap:4px; background:#34332f; border:1px solid #34332f; color:#fff; border-radius:6px; font-size:10px; line-height:1.2; min-height:28px; padding:6px 10px; white-space:nowrap; }
.pd-ui-button.pd-button-light { background:#fff; color:var(--pd-ink); border-color:#dedbd5; }
.pd-intro { margin-top:8px!important; font-size:10px; line-height:1.6; color:#74716a; }
.pd-project-card { padding:16px; border:1px solid #dfdcd5; background:#fff; border-radius:8px; margin-top:24px; min-height:81px; }
.pd-project-card strong { display:block; font-size:12px; font-weight:500; margin:0 0 7px; }
.pd-project-card p { font-size:10px; line-height:1.45; color:#7b776f; }
.pd-overlay { position:absolute; inset:0; display:grid; place-items:center; padding:16px; background:#edece795; z-index:2; }
.pd-modal { width:100%; max-width:318px; padding:20px; background:#fff; border:1px solid #e4e1da; border-radius:10px; box-shadow:0 8px 30px #302f2b18; }
.pd-modal h3 { font-size:18px; margin:0 0 15px; }
.pd-field-label { display:block; font-size:10px; margin:12px 0 6px; color:#4e4b44; }
.pd-field { display:block; border:1px solid #d8d5cd; border-radius:5px; padding:8px 9px; font-size:10px; line-height:1.5; color:#39372f; min-height:32px; }
.pd-field.pd-description { min-height:47px; }
.pd-modal-actions { display:flex; justify-content:flex-end; margin-top:14px; }
.pd-instructions-input { min-height:83px; }
.pd-typed::after { content:''; display:inline-block; width:1px; height:11px; background:#82796e; margin-left:1px; vertical-align:-2px; }
.pd-project-head { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.pd-project-label { font-size:9px; color:#7d786f; margin-bottom:5px!important; }
.pd-workspace { display:grid; grid-template-columns:minmax(0,1fr) 140px; gap:14px; margin-top:22px; }
.pd-chat-side { min-width:0; }
.pd-composer { border:1px solid #dfdcd5; border-radius:10px; padding:11px; background:#fff; min-height:107px; font-size:11px; line-height:1.5; display:flex; flex-direction:column; justify-content:space-between; }
.pd-composer-text { min-height:39px; }
.pd-composer-footer { display:flex; align-items:center; justify-content:space-between; margin-top:9px; }
.pd-composer-plus { color:#757065; font-size:19px; line-height:1; }
.pd-send { display:grid; place-items:center; width:23px; height:23px; border-radius:6px; background:#d87858; color:#fff; font-size:17px; font-weight:600; }
.pd-context { border-left:1px solid #e3dfd8; padding-left:13px; min-width:0; }
.pd-context-head { display:flex; align-items:center; justify-content:space-between; font-size:10px; margin-bottom:11px; }
.pd-context-plus { font-size:16px; color:#7b7368; }
.pd-instructions-link { display:block; font-size:9px; border:1px solid #ded9cf; border-radius:5px; padding:7px 6px; color:#5e584e; line-height:1.5; background:#fff; }
.pd-saved-rule { font-size:9px; line-height:1.5; color:#686158; padding:8px 0; }
.pd-file { display:flex; gap:5px; align-items:center; border:1px solid #e2ddd4; border-radius:5px; background:#fff; padding:7px 5px; font-size:8px; margin-top:10px; word-break:break-word; }
.pd-file-icon { width:13px; height:17px; border:1px solid #b2a999; border-radius:2px; flex:none; position:relative; }
.pd-file-icon::after { content:''; position:absolute; left:3px; right:3px; top:5px; height:4px; border-top:1px solid #b2a999; border-bottom:1px solid #b2a999; }
.pd-context-note { font-size:8px; line-height:1.5; color:#7e776c; margin-top:9px!important; }
.pd-user-message { margin:0 0 13px!important; padding:9px 11px; border-radius:7px; background:#ebe8e1; font-size:10px; line-height:1.5; }
.pd-answer { font-size:10px; line-height:1.65; padding:1px 3px; }
.pd-answer-mark { display:flex; align-items:center; gap:5px; font-size:9px; font-weight:600; margin-bottom:6px; }
.pd-answer-mark img { width:16px; height:16px; }
.pd-chat-thread { font-size:8px; color:#82796e; margin:0 0 8px!important; }
.pd-followup-composer { min-height:45px; margin-top:15px; padding:8px; font-size:9px; color:#8a8379; }
.pd-followup-composer .pd-composer-text { min-height:0; }
.pd-pointer { position:absolute; top:0; left:0; width:20px; height:25px; z-index:5; opacity:0; pointer-events:none; transition:transform .42s cubic-bezier(.25,.7,.25,1),opacity .15s; filter:drop-shadow(0 2px 1px #0002); }
.pd-pointer svg { width:20px; height:25px; overflow:visible; }
.pd-pointer.is-visible { opacity:1; }
.pd-pointer.is-clicking::after { content:''; position:absolute; left:-5px; top:-5px; width:18px; height:18px; border:2px solid #d8785890; border-radius:50%; animation:pd-click .4s ease-out both; }
@keyframes pd-click { to { transform:scale(1.9); opacity:0; } }
.pd-controls { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; margin-top:13px; }
.project-demo .pd-step { border:0; border-top:2px solid #e6e4df; border-radius:0; background:none; color:#79736b; text-align:left; padding:10px 3px 6px; min-height:44px; font-size:11px; line-height:1.4; font-weight:400; }
.project-demo .pd-step[aria-pressed="true"] { color:#37332d; border-top-color:#d87858; }
.pd-step-number { margin-right:5px; font-size:9px; color:#9a9288; }
.pd-caption-row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-top:8px; }
.pd-caption { font-size:12px; line-height:1.6; color:#69635b; max-width:32rem; margin:0; min-height:39px; }
.project-demo .pd-replay { display:inline-flex; align-items:center; justify-content:center; min-height:44px; gap:5px; border:0; padding:0; background:none; color:#6b6257; font-size:11px; white-space:nowrap; }
.project-demo button:focus-visible { outline:2px solid #655849; outline-offset:3px; }
.pd-provenance { font-size:10px; line-height:1.6; color:#898076; margin:9px 0 0!important; }
.pd-provenance a { text-decoration:underline; text-underline-offset:3px; }
.pd-status { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:600px) {
  .pd-screen { grid-template-columns:91px minmax(0,1fr); height:348px; }
  .pd-sidebar { padding:17px 5px; font-size:9px; }
  .pd-sidebar-logo { font-size:19px; margin-left:5px; }
  .pd-nav-row { padding:5px; gap:5px; }
  .pd-nav-project { font-size:8px; }
  .pd-stage { padding:21px 14px; }
  .pd-stage h3 { font-size:19px; }
  .pd-workspace { grid-template-columns:minmax(0,1fr); gap:12px; margin-top:17px; }
  .pd-context { border-left:0; padding-left:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:9px; border-top:1px solid #e3dfd8; padding-top:11px; }
  .pd-context-head { grid-column:1/-1; margin-bottom:5px; }
  .pd-saved-rule { padding:0; font-size:8px; }
  .pd-file { margin-top:0; font-size:8px; align-self:start; }
  .pd-context-note { grid-column:1/-1; margin-top:6px!important; }
  .pd-instructions-link { align-self:start; font-size:8px; padding:5px; }
  .pd-context-empty { display:block; }
  .pd-context-empty .pd-context-head { margin-bottom:7px; }
  .pd-composer { min-height:83px; font-size:10px; }
  .pd-composer-text { min-height:28px; }
  .pd-composer-footer { margin-top:6px; }
  .pd-user-message { font-size:9px; margin-bottom:8px!important; padding:7px 9px; }
  .pd-answer { font-size:9px; line-height:1.55; }
  .pd-followup-composer { min-height:30px; margin-top:10px; }
  .pd-modal { padding:17px; }
  .pd-modal h3 { font-size:17px; }
  .pd-address { display:none; }
  .pd-caption { font-size:11px; }
  .project-demo .pd-step { font-size:10px; padding-right:0; padding-left:0; }
  .pd-step-number { display:block; margin:0 0 2px; }
  .pd-provenance { font-size:9px; }
}
@media (max-width:380px) {
  .pd-screen { grid-template-columns:72px minmax(0,1fr); height:372px; }
  .pd-sidebar { padding-left:3px; padding-right:3px; }
  .pd-sidebar-logo { font-size:16px; }
  .pd-nav-row { font-size:8px; gap:3px; padding:5px 3px; }
  .pd-nav-project { font-size:7px; }
  .pd-nav-icon { font-size:13px; width:11px; }
  .pd-stage { padding:18px 10px; }
  .pd-ui-button { font-size:8px; padding:5px 6px; }
  .pd-projects-head h3 { font-size:17px; }
  .pd-modal { padding:15px 12px; }
  .pd-overlay { padding:10px; }
  .pd-field { font-size:9px; }
  .pd-context { grid-template-columns:minmax(0,1fr); row-gap:5px; }
  .pd-context-head,.pd-context-note { grid-column:1; }
  .pd-file { width:fit-content; }
  .pd-context-note { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .pd-pointer { display:none; transition:none; }
  .pd-pointer.is-clicking::after { animation:none; }
}