/**
 * The boot loader's CSS and markup, composed into `shell-page.ts`.
 *
 * Split out for the same reason `asset-detail-panel.ts` is: that file is the busiest in the
 * package, and a stylesheet plus a static SVG carry no closure state, so they can leave without
 * threading anything across a boundary. The loader's *behaviour* stays inline there, because
 * showing and hiding it needs `generation`, `setStatus` and `start` from the enclosing IIFE.
 *
 * ── Why the brandmark is coloured from the stylesheet ────────────────────────────────────────
 *
 * `__tests__/shell-page.test.ts` reads the <style> block to catch a colour that left the palette,
 * which means a `fill="#fff"` on a path would be exactly the kind of literal it exists to catch and
 * exactly the kind it cannot see. So every node here carries a class and no paint attribute: the
 * body is `currentColor` off the svg's own `color`, and the wand is a token. It also makes the
 * failed state one CSS rule rather than a JS attribute write.
 *
 * ── The one thing that must not be renamed back ──────────────────────────────────────────────
 *
 * The artwork this is ported from names its classes `.spin` / `.hop` and its keyframes `spin` /
 * `hop`. `shell-page.ts` ALREADY has `.spin` and `@keyframes spin`, live on the forge step glyphs
 * and the job thumbnails. A duplicate `@keyframes` does not error — the later one silently wins —
 * so a verbatim port would leave every spinner in the assets panel doing a 1.9s double backflip.
 * Hence `bm-bird-` on the classes and `bird-` on the keyframes. There is a test.
 *
 * Same template-literal rules as its host: **no backticks**, anywhere.
 */
/**
 * Styles for `#boot`, appended to the shell's stylesheet.
 *
 * The 1.9s cycle and every keyframe stop below are the artwork's, unchanged. What is Bitmagic's
 * rather than the artwork's: the surface it stands on, the wand's colour, and the still variant.
 */
export declare const BOOT_LOADER_CSS = "\n  /* Over the GAME, not over the page: the bar and the assets panel stay live while a boot is in\n     flight, because a forge ticking in the panel is exactly what a creator watches during one.\n     z-index 5 keeps it under #hq-overlay (10) and #asset-overlay (11) \u2014 both are fixed, in the root\n     stacking context \u2014 so a preview opened from a row mid-boot is not trapped behind it. */\n  #boot { position: absolute; inset: 0; z-index: 5; overflow: hidden;\n          display: flex; flex-direction: column; align-items: center; justify-content: center;\n          background: radial-gradient(120% 120% at 50% 42%, var(--bm-surface), var(--bm-bg));\n          opacity: 0; visibility: hidden;\n          transition: opacity .2s ease, visibility 0s linear .2s; }\n  #boot.show { opacity: 1; visibility: visible; transition: opacity .2s ease; }\n\n  /* The mark's stage, at the proportions it was drawn at. Nothing here clips: the hop's apex rises\n     about 47px above this box on purpose, which is what #boot's overflow is for. */\n  #boot-stage { position: relative; width: 220px; height: 320px; }\n  @media (max-height: 560px) { #boot-stage { transform: scale(.72); } }\n\n  /* The ground shadow carries the weight of the hop \u2014 without it the mark reads as sliding rather\n     than landing. The lifted centre of the gradient above is the only reason a black ellipse is\n     visible at all on a near-black surface. */\n  .bm-bird-shadow { position: absolute; bottom: 44px; left: 50%; width: 120px; height: 26px;\n                    margin-left: -60px; border-radius: 50%; background: #000000; opacity: .55;\n                    filter: blur(4px);\n                    animation: bird-shadow 1.9s cubic-bezier(.5,0,.5,1) infinite; }\n\n  /* Vertical arc and squash, origin at the feet. */\n  .bm-bird-hop { position: absolute; bottom: 60px; left: 50%; width: 150px; height: 150px;\n                 margin-left: -75px; transform-origin: 50% 100%;\n                 animation: bird-hop 1.9s infinite; }\n  /* The two backflips, around the mark's own centre. Named apart from the shell's .spin \u2014 see the\n     header. */\n  .bm-bird-flip { width: 100%; height: 100%; transform-origin: 50% 50%;\n                  animation: bird-flip 1.9s infinite; }\n\n  .bm-bird-svg { display: block; width: 100%; height: 100%; overflow: visible;\n                 color: var(--bm-text); }\n  .bm-bird-svg .body { fill: currentColor; }\n  .bm-bird-svg .detail { fill: #000000; }\n  .bm-bird-svg .iris { fill: none; stroke: currentColor; }\n  .bm-bird-svg .iris-edge { fill: none; stroke: #000000; }\n  /* The wand is the only colour on the mark, and it is Aquamarine: DESIGN.md spends that accent on\n     creation. The artwork draws it in a pink that on this surface already means discard or failed,\n     so it is retuned rather than copied. */\n  .bm-bird-svg .wand { fill: none; stroke: var(--bm-aqua); }\n\n  /* Content voice: sentence case, muted, one line. The negative margin reclaims the empty air the\n     stage reserves under the shadow, so the mark and its line read as one block. */\n  #boot-message { margin: -56px 0 0; max-width: 420px; text-align: center; font-size: 13px;\n                  color: var(--bm-text-muted); }\n  #boot-retry { display: none; margin-top: 16px; }\n\n  /* Still, dim, no ground pulse. What every boot after the first gets: the animation is a first\n     impression, not a progress bar, and an agent reloading forty times an hour should not be shown\n     forty backflips. The shadow stays drawn \u2014 a mark with no ground under it reads as a layout\n     mistake rather than as a rest pose. */\n     Held at .55 rather than lower: further down the white mark stops reading as the brandmark and\n     starts reading as a disabled control, which is the one thing a loading state must not look\n     like. */\n  #boot.quiet #boot-stage { opacity: .55; }\n  #boot.quiet .bm-bird-hop, #boot.quiet .bm-bird-flip,\n  #boot.quiet .bm-bird-shadow { animation: none; }\n\n  /* A boot that ended badly keeps the stage rather than handing back a blank iframe. The 8px dot in\n     the bar is easy to miss, and both failures here name a command the creator should run next.\n     failBoot() sets .quiet too, so the mark is already still and at the same weight \u2014 the message\n     and the pill are what make this state different, which is as much difference as it needs. */\n  #boot.failed #boot-message { color: var(--bm-pink-hover); }\n  #boot.failed #boot-retry { display: inline-block; }\n  /* No magic trick on a failure: the wand goes out, so the only accent left is the one the message\n     is written in. DESIGN.md does not stack two accents in one component. */\n  #boot.failed .bm-bird-svg .wand { stroke: var(--bm-text-dim); }\n\n  /* Full brightness, no motion: dimming means \"this is a repeat boot\", not \"you asked for less\n     movement\". */\n  @media (prefers-reduced-motion: reduce) {\n    .bm-bird-hop, .bm-bird-flip, .bm-bird-shadow { animation: none; }\n    #boot { transition: none; }\n  }\n\n  @keyframes bird-hop {\n    0%,6%  { transform: translateY(0)     scale(1,1);      animation-timing-function: cubic-bezier(.35,0,.35,1); }\n    14%    { transform: translateY(10%)   scale(1.16,.80); animation-timing-function: cubic-bezier(.2,.9,.35,1); }\n    22%    { transform: translateY(-14%)  scale(.82,1.22); animation-timing-function: cubic-bezier(.12,.62,.35,1); }\n    50%    { transform: translateY(-105%) scale(1,1);      animation-timing-function: cubic-bezier(.6,0,.85,.35); }\n    80%    { transform: translateY(-4%)   scale(.9,1.12);  animation-timing-function: cubic-bezier(.3,.5,.5,1); }\n    88%    { transform: translateY(8%)    scale(1.24,.72); animation-timing-function: cubic-bezier(.2,.2,.3,1); }\n    94%    { transform: translateY(-3%)   scale(.93,1.08); animation-timing-function: cubic-bezier(.3,0,.4,1); }\n    100%   { transform: translateY(0)     scale(1,1); }\n  }\n  @keyframes bird-flip {\n    0%,20%   { transform: rotate(0deg); animation-timing-function: cubic-bezier(.3,.1,.3,1); }\n    84%,100% { transform: rotate(-720deg); }\n  }\n  @keyframes bird-shadow {\n    0%,6% { transform: scale(1);    opacity: .55; }\n    50%   { transform: scale(.5);   opacity: .25; }\n    88%   { transform: scale(1.18); opacity: .6; }\n    100%  { transform: scale(1);    opacity: .55; }\n  }\n";
/**
 * The overlay, placed inside `#viewport` so it covers the game and nothing else.
 *
 * The path data is the brandmark, verbatim from the artwork; only the paint attributes are gone,
 * replaced by the classes the stylesheet above paints.
 */
export declare const BOOT_LOADER_HTML = "\n      <div id=\"boot\" aria-live=\"polite\">\n        <div id=\"boot-stage\">\n          <div class=\"bm-bird-shadow\"></div>\n          <div class=\"bm-bird-hop\">\n            <div class=\"bm-bird-flip\">\n              <svg class=\"bm-bird-svg\" viewBox=\"0 0 325.98 286.58\" role=\"img\" aria-label=\"Bitmagic\">\n                <path class=\"body\" d=\"M189.35,43.3c-18.08,0-38.95,7.71-48.75,24.5-12.41,21.25.75,39.51-14.27,56.28-14.67,16.37-35.49,6.27-49.25,23.66-9.53,12.06-9.42,29.43-6.22,40.71,11.9,41.87,80.72,50.03,88.1,50.82,4.41.47,12.56,1.33,22.54,1.33,22.34,0,53.82-4.33,72.88-27.11,41.89-50.08-1.78-158.91-54.06-169.17-3.44-.68-7.14-1.02-10.96-1.02\"/>\n                <path class=\"body\" d=\"M84.96,155.05s-35.24-11.29-29.46-25.64c5.78-14.35,28.91,21.38,28.91,21.38\"/>\n                <path class=\"body\" d=\"M82.66,157.28s-24.58-32.65-10.23-41.72c14.35-9.07,12.44,37.58,12.44,37.58\"/>\n                <path class=\"detail\" d=\"M135.5,135.43c-4.56,6.82-5.76,7.24-13.55,4.67,6.82,4.56,7.24,5.76,4.67,13.55,4.56-6.82,5.76-7.24,13.55-4.67-6.82-4.56-7.24-5.76-4.67-13.55Z\"/>\n                <path class=\"detail\" d=\"M160.11,84.01c-4.56,6.82-5.76,7.24-13.55,4.67,6.82,4.56,7.24,5.76,4.67,13.55,4.56-6.82,5.76-7.24,13.55-4.67-6.82-4.56-7.24-5.76-4.67-13.55Z\"/>\n                <path class=\"detail\" d=\"M159.7,167.94c-2.6,3.89-3.28,4.12-7.72,2.66,3.89,2.6,4.12,3.28,2.66,7.72,2.6-3.89,3.28-4.12,7.72-2.66-3.89-2.6-4.12-3.28-2.66-7.72Z\"/>\n                <path class=\"detail\" d=\"M189.27,58.59c-2.6,3.89-3.28,4.12-7.72,2.66,3.89,2.6,4.12,3.28,2.66,7.72,2.6-3.89,3.28-4.12,7.72-2.66-3.89-2.6-4.12-3.28-2.66-7.72Z\"/>\n                <path class=\"detail\" d=\"M162.41,113.42c-4.26,6.37-5.38,6.76-12.66,4.36,6.37,4.26,6.76,5.38,4.36,12.66,4.26-6.37,5.38-6.76,12.66-4.36-6.37-4.26-6.76-5.38-4.36-12.66Z\"/>\n                <circle class=\"detail\" cx=\"206.9\" cy=\"115.82\" r=\"23.31\" transform=\"translate(-10.12 20.3) rotate(-5.48)\"/>\n                <circle class=\"iris\" stroke-width=\"12.08\" stroke-miterlimit=\"10\" cx=\"206.9\" cy=\"115.82\" r=\"23.31\" transform=\"translate(-10.12 20.3) rotate(-5.48)\"/>\n                <circle class=\"iris-edge\" stroke-width=\"2.99\" stroke-miterlimit=\"10\" cx=\"206.89\" cy=\"115.73\" r=\"28.36\" transform=\"translate(-25.72 161.42) rotate(-40.34)\"/>\n                <line class=\"wand\" stroke-linecap=\"round\" stroke-width=\"15.33\" stroke-miterlimit=\"10\" x1=\"238.54\" y1=\"82.17\" x2=\"264.66\" y2=\"53.95\"/>\n              </svg>\n            </div>\n          </div>\n        </div>\n        <p id=\"boot-message\">Bringing your world to life&hellip;</p>\n        <button id=\"boot-retry\" class=\"bm-pill bm-pill--ghost\" type=\"button\">Try again</button>\n      </div>\n";