/* uv-tool-demo.css — reusable self-playing "app preview" for UV tool heroes.
   Motion-safe: all animation scoped under .uvd (not .uvd-static). Colors from UV palette. */
.uvd{--uvd-liberty:#4B52A3;--uvd-liberty2:#6f77c9;--uvd-ink:#1A1A1A;--uvd-muted:#5E646E;
  --uvd-line:#E6E0D4;--uvd-ok:#1f9d6b;--uvd-warn:#c47d12;--uvd-stop:#c0392b;
  font-family:'Open Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  max-width:560px;margin:24px auto 0}
.uvd-window{background:#fff;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.18);
  box-shadow:0 26px 64px -22px rgba(10,14,40,.6),0 4px 14px rgba(10,14,40,.28)}
.uvd-bar{display:flex;align-items:center;gap:9px;padding:10px 14px;background:#f3f2ee;border-bottom:1px solid #e6e0d4}
.uvd-dots{display:flex;gap:6px}
.uvd-dot{width:11px;height:11px;border-radius:50%}
.uvd-dot.r{background:#ff5f57}.uvd-dot.y{background:#febc2e}.uvd-dot.g{background:#28c840}
.uvd-title{font-size:12px;font-weight:600;color:#5E646E;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uvd-body{padding:15px 18px 13px}
.uvd-sample{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:#8a4b16;background:#fff8f3;border:1px solid #f3d9bf;border-radius:20px;padding:2px 9px;margin-bottom:11px}
.uvd-scenes{position:relative;min-height:252px}
.uvd-scene{display:none}
.uvd-scene.on{display:block}
.uvd:not(.uvd-static) .uvd-scene.on{animation:uvd-fin .45s ease both}
@keyframes uvd-fin{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
/* profile */
.uvd-field{margin-bottom:10px}
.uvd-flabel{font-size:11px;font-weight:600;color:#5E646E;margin-bottom:4px}
.uvd-input{border:1px solid #E6E0D4;border-radius:7px;padding:8px 11px;font-size:13px;min-height:35px;
  color:#1A1A1A;background:#fff;display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.uvd-caret{display:inline-block;width:1px;height:15px;background:#4B52A3;margin-left:1px;vertical-align:middle}
.uvd:not(.uvd-static) .uvd-caret.blink{animation:uvd-blink 1s step-end infinite}
@keyframes uvd-blink{50%{opacity:0}}
.uvd-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:5px 11px;
  border-radius:20px;background:#eef0f8;color:#4B52A3;border:1px solid #d5d9ee}
.uvd-chip.sel{background:#4B52A3;color:#fff;border-color:#4B52A3}
/* running */
.uvd-run-label{font-size:12.5px;color:#33384a;margin:14px 0 10px}
.uvd-prog{height:9px;background:#eceaf4;border-radius:20px;overflow:hidden}
.uvd-prog-fill{height:100%;width:0;background:linear-gradient(90deg,#4B52A3,#6f77c9);border-radius:20px}
.uvd-prog-pct{font-size:11px;color:#4B52A3;font-weight:700;margin-top:7px;text-align:right}
/* sections */
.uvd-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 11px;
  border:1px solid #E6E0D4;border-left:3px solid #E6E0D4;border-radius:8px;margin-bottom:6px}
.uvd:not(.uvd-static) .uvd-row{opacity:0;transform:translateY(6px)}
.uvd:not(.uvd-static) .uvd-row.in{opacity:1;transform:none;transition:opacity .35s ease,transform .35s ease}
.uvd-row.ok{border-left-color:#1f9d6b}
.uvd-row.warn{border-left-color:#c47d12}
.uvd-rname{font-size:12.5px;font-weight:600;color:#1A1A1A}
.uvd-rrule{font-size:11px;color:#5E646E;margin-top:1px}
.uvd-rchip{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap}
.uvd:not(.uvd-static) .uvd-rchip{opacity:0;transition:opacity .3s ease}
.uvd:not(.uvd-static) .uvd-rchip.show{opacity:1}
.uvd-rchip.ok{background:#e7f6ef;color:#1f9d6b}
.uvd-rchip.warn{background:#fdf4e3;color:#c47d12}
/* result */
.uvd-result{display:flex;gap:16px;align-items:center;padding:6px 0 2px}
.uvd-dial{flex:0 0 auto;width:118px;text-align:center;border:1px solid #E6E0D4;border-radius:12px;padding:14px 8px}
.uvd-score{font-size:38px;font-weight:800;line-height:1;color:#c47d12}
.uvd-score span{font-size:16px;font-weight:700;color:#8a7a52}
.uvd-band{font-size:12px;font-weight:700;color:#c47d12;margin-top:5px}
.uvd-take{font-size:13px;color:#33384a;line-height:1.5}
.uvd-take b{color:#c47d12}
/* controls + caption */
.uvd-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:11px;
  padding-top:10px;border-top:1px solid #f0ede5}
.uvd-steps{display:flex;gap:6px}
.uvd-step{width:22px;height:4px;border-radius:20px;background:#e0ddd3}
.uvd-step.on{background:#4B52A3}
.uvd-btn{font:inherit;font-size:12px;font-weight:600;color:#4B52A3;background:#fff;border:1px solid #d5d9ee;
  border-radius:20px;padding:5px 13px;cursor:pointer}
.uvd-btn:hover{border-color:#4B52A3}
.uvd-cap{max-width:560px;margin:13px auto 0;text-align:center;font-size:12.5px;color:rgba(255,255,255,.86);line-height:1.55}
.uvd-jump{display:inline-block;margin-top:5px;font-size:12.5px;font-weight:600;color:#E4C06B;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;background:none;border:none;font-family:inherit}
@media(max-width:560px){.uvd-result{flex-direction:column;align-items:stretch}.uvd-dial{width:auto}}