/* p3video/common/base.css : page shell for a P3 explainer video page (1920 × 1080 SVG, scaled to fit in preview). */
html, body { margin: 0; height: 100%; overflow: hidden; background: #e6e9ef; }
body.render { background: #f7f8fb; }
#wrap { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; }
body:not(.render) #wrap { box-shadow: 0 4px 24px rgba(27, 31, 42, .18); }
#S { display: block; background: #f7f8fb; font-family: Lexend, "Segoe UI", system-ui, sans-serif;
     text-rendering: geometricPrecision; font-kerning: normal; }
#S text { white-space: pre; }

/* preview scrub / play bar (hidden in ?render=1) */
#ui { position: fixed; left: 12px; right: 12px; bottom: 10px; height: 44px; display: flex; gap: 12px; align-items: center;
      padding: 0 12px; border-radius: 12px; background: rgba(255, 255, 255, .94); box-shadow: 0 2px 10px rgba(27, 31, 42, .15);
      font: 600 14px Lexend, "Segoe UI", system-ui, sans-serif; color: #1b1f2a; }
#ui input[type=range] { flex: 1; accent-color: #2f6df6; }
#ui button { font: inherit; min-width: 74px; padding: 7px 14px; border-radius: 99px; border: 0; background: #2f6df6; color: #fff; cursor: pointer; }
#ui #tc { min-width: 120px; text-align: right; font-variant-numeric: tabular-nums; }
body.render #ui { display: none; }
#pv-err { position: fixed; left: 16px; top: 16px; right: 16px; margin: 0; padding: 12px 14px; border-radius: 10px; background: #fdecec;
          color: #8a1c1c; font: 13px/1.4 Consolas, monospace; white-space: pre-wrap; z-index: 9; }