html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #0d0c15; }
    #photocraft_canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
    #photocraft_loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
      padding: 0 16px; text-align: center; color: #c3bfd0; font: 14px Inter, system-ui, sans-serif; pointer-events: none;
      background: radial-gradient(60% 50% at 50% 42%, #221c3d 0%, #0d0c15 72%); }
    #photocraft_loading p { margin: 0 0 8px; max-width: 420px; line-height: 1.5; }
    #photocraft_loading a { color: #c1b4ff; pointer-events: auto; }
    .cq-mark { width: 76px; height: 76px; border-radius: 22px; margin-bottom: 14px; box-shadow: 0 12px 40px rgba(101, 82, 255, .35); animation: cq-pulse 1.6s ease-in-out infinite; }
    .cq-name { font-size: 17px; font-weight: 600; color: #fff; letter-spacing: .2px; margin: 0 0 4px !important; }
    .cq-bar { width: 180px; height: 4px; border-radius: 4px; background: #ffffff14; overflow: hidden; margin-bottom: 10px; }
    .cq-bar i { display: block; width: 40%; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #6552ff, #9a67f5, #4dd8ff); animation: cq-load 1.3s ease-in-out infinite; }
    @keyframes cq-load { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
    @keyframes cq-pulse { 50% { transform: scale(1.05); } }
    @media (prefers-reduced-motion: reduce) { .cq-mark, .cq-bar i { animation: none; } }
    /* The app removes this element once it runs. If the WebAssembly never downloads or doesn't match
       this page, no Rust runs to say so, so the page itself shows what to do after a while. */
    #photocraft_stalled { color: #8f8a9e; visibility: hidden; animation: photocraft-stalled 0s 20s forwards; }
    @keyframes photocraft-stalled { to { visibility: visible; } }