/* Setup guide: step cards with live HTML UI visuals (no screenshots). Scales with the card; stacks on phones. */
.gsteps{display:grid;gap:18px;margin:18px 0}
.gstep{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:22px;align-items:center;background:#FAF6EF;border:1px solid #E8DCC9;border-radius:20px;padding:20px}
.gstep .gtxt h3{font-family:'Playfair Display',Georgia,serif;font-size:22px;line-height:1.2;color:#1A1210;margin:0 0 6px;display:flex;gap:10px;align-items:baseline}
.gstep .gtxt h3 i{font-style:normal;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:700;background:#7A1E2E;color:#fff;border-radius:30px;padding:3px 10px;flex:none}
.gstep .gtxt p{margin:6px 0;font-size:15.5px;line-height:1.6}
.gstep .gtxt .sub{font-size:13.5px;color:#8A7F76}
.gstep .gtxt kbd,.gstep .gtxt code{font:600 13px/1 ui-monospace,Menlo,monospace;background:#F0E9DB;border-radius:6px;padding:3px 6px;color:#1A1210}
.vis{position:relative;min-width:0}
/* dark app chrome */
.ui{background:#262624;color:#E8E6E1;border:1px solid #3A3936;border-radius:14px;box-shadow:0 14px 34px rgba(26,18,16,.22);font:500 14px/1.4 'DM Sans',system-ui,sans-serif;overflow:hidden}
.ui .bar{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid #34332F;background:#1F1E1C}
.ui .dots{display:flex;gap:6px;margin-right:6px}.ui .dots i{width:10px;height:10px;border-radius:50%;background:#4A4945;display:block}
.ui .tog{display:flex;gap:4px;background:#2E2D2A;border:1px solid #3A3936;border-radius:10px;padding:3px}
.ui .tog span{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:8px;color:#A8A6A0;font-size:13px;font-weight:700}
.ui .tog span.on{background:#3E3D39;color:#fff;box-shadow:0 0 0 2px #D9B45A}
.ui .tog svg{width:15px;height:15px}
.ui .body{padding:16px}
.ui .comp{background:#30302D;border:1px solid #45443F;border-radius:14px;padding:12px 14px}
.ui .comp .ph{color:#8E8C86}
.ui .comp .typed{font:500 13px/1.6 ui-monospace,Menlo,monospace;color:#F2F0EA;white-space:pre-wrap;word-break:break-word}
.ui .comp .typed b{color:#D9B45A;font-weight:600}
.ui .row{display:flex;justify-content:space-between;align-items:center;margin-top:10px;gap:8px}
.ui .chip{display:inline-flex;align-items:center;gap:6px;border:1px solid #4A4945;border-radius:8px;padding:5px 9px;font-size:12.5px;color:#E8E6E1}
.ui .chip.hl{box-shadow:0 0 0 2px #D9B45A}
.ui .chip svg{width:14px;height:14px}
.ui .send{width:30px;height:30px;border-radius:50%;background:#C96442;display:grid;place-items:center;color:#fff;font-weight:700;flex:none}
.ui .menu{margin-top:8px;background:#2B2A27;border:1px solid #45443F;border-radius:12px;padding:6px;max-width:260px}
.ui .menu div{padding:7px 10px;border-radius:8px;font-size:13px;display:flex;align-items:center;gap:8px}
.ui .menu .hd{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#8E8C86;padding-bottom:4px}
.ui .menu .sel{background:#3E3D39;color:#fff;box-shadow:inset 0 0 0 2px #D9B45A}
.ui .msg{border-radius:12px;padding:9px 12px;margin:8px 0;max-width:92%;font-size:13.5px}
.ui .msg.me{background:#3E3D39;margin-left:auto;font-family:ui-monospace,Menlo,monospace}
.ui .msg.ai{background:#2E2D2A;border:1px solid #3A3936}
.ui .ok{color:#7FD1A8}
/* light finder-ish window */
.fx{background:#fff;border:1px solid #DDD6CC;border-radius:14px;box-shadow:0 14px 34px rgba(26,18,16,.14);overflow:hidden;font:500 13.5px/1.4 'DM Sans',system-ui,sans-serif;color:#1A1210}
.fx .bar{display:flex;gap:6px;padding:10px 12px;background:#F4F1EC;border-bottom:1px solid #E8DCC9}
.fx .bar i{width:10px;height:10px;border-radius:50%;background:#D8CFC2;display:block}
.fx .cols{display:grid;grid-template-columns:110px 1fr}
.fx .side{background:#FAF6EF;border-right:1px solid #EFE7DA;padding:10px 8px}
.fx .side div{padding:5px 8px;border-radius:6px;color:#5A4E48;font-size:12.5px}
.fx .side .on{background:#E8DCC9;color:#1A1210;font-weight:700}
.fx .grid{display:flex;flex-wrap:wrap;gap:14px;padding:16px;align-content:flex-start}
.fx .f{width:82px;text-align:center;font-size:12px;color:#5A4E48}
.fx .f svg{width:56px;height:46px;display:block;margin:0 auto 4px}
.fx .f.new span{display:inline-block;background:#2F6FDB;color:#fff;border-radius:5px;padding:2px 6px;font-weight:700}
/* gold callout */
.call{display:flex;align-items:center;gap:8px;margin-top:10px;font:700 13.5px/1.3 'DM Sans',sans-serif;color:#7A1E2E}
.call::before{content:'';flex:none;width:22px;height:22px;border-radius:50%;background:#D9B45A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7' fill='none' stroke='%231A1210' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.call.no{color:#8A7F76}.call.no::before{background:#E8DCC9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' fill='none' stroke='%235A4E48' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/12px no-repeat}
.dl{background:#fff;border:1px solid #DDD6CC;border-radius:14px;padding:18px;text-align:center;box-shadow:0 14px 34px rgba(26,18,16,.12)}
.dl .logo{width:46px;height:46px;margin:0 auto 8px;border-radius:12px;background:#C96442;display:grid;place-items:center}
.dl .logo svg{width:28px;height:28px}
.dl b{display:block;font:700 17px/1.2 'DM Sans',sans-serif;color:#1A1210}
.dl .btns{display:flex;gap:8px;justify-content:center;margin-top:12px;flex-wrap:wrap}
.dl .btns a{background:#1A1210;color:#fff;border-radius:10px;padding:9px 14px;font:700 13px/1 'DM Sans',sans-serif;text-decoration:none}
.dl .url{margin-top:10px;font:600 12.5px/1 ui-monospace,Menlo,monospace;color:#8A7F76}
.bform{display:grid;gap:8px;background:#fff;border:1px solid #DDD6CC;border-radius:14px;padding:16px;box-shadow:0 14px 34px rgba(26,18,16,.12);font-size:13.5px}
.bform label{display:grid;grid-template-columns:100px 1fr;align-items:center;gap:10px;color:#5A4E48;font-weight:700;margin:0}
.bform span.v{border:1px solid #E8DCC9;border-radius:8px;padding:6px 10px;color:#1A1210;font-weight:500;background:#FFFDFB}
.bform .sw{display:flex;gap:6px}.bform .sw i{width:24px;height:24px;border-radius:6px;display:block;border:1px solid rgba(0,0,0,.08)}
@media (max-width:760px){
  .gstep{grid-template-columns:1fr;padding:16px;gap:14px}
  .fx .cols{grid-template-columns:86px 1fr}
  .bform label{grid-template-columns:84px 1fr}
}
.ui .menu svg{width:15px;height:15px;flex:none}
.gstep .code{padding-right:74px;font-size:13.5px;white-space:pre;overflow-x:auto}
@media (max-width:760px){.gstep .code{font-size:12.5px}}