.htp-experience{padding:20px}
.htp-steps{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.htp-step{padding:8px 14px;border-radius:999px;border:1.5px solid #e5dfef;background:#fff;font-weight:800;font-size:.84rem;cursor:pointer;color:#4a4560}
.htp-step.is-on{background:#5b46e8;border-color:#5b46e8;color:#fff}
.htp-canvas-wrap{margin:0 0 16px;padding:14px;border-radius:18px;border:1px solid #ebe7f5;background:linear-gradient(160deg,#faf8ff,#fff)}
#htpCanvas{width:100%;max-width:100%;height:auto;display:block;border-radius:12px;border:1px solid #e0dbef;background:#fff;touch-action:none;cursor:crosshair}
.htp-tools{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.htp-upload-btn{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;margin:0}
.htp-reflection{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:0 0 16px;padding:16px;border:1px solid #ebe7f5;border-radius:16px;background:#f7f5ff}
.htp-reflection legend{grid-column:1/-1;font-weight:800;color:#2a2540;padding:0 4px}
.htp-reflection label{display:flex;flex-direction:column;gap:6px;font-size:.82rem;font-weight:700;color:#6b6780}
.htp-reflection select{padding:10px 12px;border-radius:12px;border:1px solid #e0dbef;background:#fff;font-size:.9rem;color:#2a2540}
.htp-result-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:16px 0}
.htp-result-grid figure{margin:0;padding:10px;border-radius:14px;border:1px solid #ebe7f5;background:#fff}
.htp-result-grid figcaption{font-size:.78rem;font-weight:800;color:#6b6780;margin-bottom:8px}
.htp-result-grid img{width:100%;height:auto;border-radius:10px;display:block}