/* Shared pre-bundle/native/workspace artwork; the first launch owns its four-second clock. */
.od-startup-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  font-family: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-user-select: none;
  user-select: none;
}
.od-startup-screen::before,
.od-startup-screen::after { position: absolute; inset: 0; content: ""; }
.od-startup-screen::before { z-index: -2; }
.od-startup-stage { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; text-align: center; }
.od-startup-progress { width: 74px; height: 2px; overflow: hidden; border-radius: 2px; }
.od-startup-progress span { display: block; width: 35%; height: 100%; border-radius: inherit; animation: od-startup-progress 1.8s ease-in-out infinite; }
.od-startup-status { margin: 0; line-height: 1.5; letter-spacing: .025em; }
.od-startup-stage small { letter-spacing: .04em; }
.od-startup-screen.is-workspace { z-index: 999; }
.od-startup-screen.is-leaving { pointer-events: none; animation: od-startup-exit 220ms ease-out both; }
@keyframes od-startup-progress { from { transform: translateX(-110%); } to { transform: translateX(390%); } }
@keyframes od-startup-exit { to { opacity: 0; } }

.od-startup-screen {
  color: #fff5e3;
  background: #061019;
  --stone-scene-duration: 4s;
}

.od-startup-screen::before {
  inset: -8%;
  background: linear-gradient(rgba(3, 17, 29, .7), rgba(3, 17, 29, .86)), url('/startup/startup-stone-v1.webp') center / cover no-repeat;
  filter: blur(24px) brightness(.45) saturate(.8);
  animation: od-startup-ambient-exposure var(--stone-scene-duration) linear forwards;
}
.od-startup-screen::after {
  z-index: 1;
  background: linear-gradient(to top, rgba(2, 13, 23, .88), transparent 18%, transparent 85%, rgba(2, 13, 23, .22));
  pointer-events: none;
  animation: none;
}

.od-startup-art {
  /* Coordinates are relative to one fixed square, never to the viewport. */
  --stone-art-ratio: 1;
  --stone-seal-x: 50%;
  --stone-seal-y: 71.5%;
  --stone-seal-size: 20%;
  --stone-eye-x: 50%;
  --stone-eye-y: 55.8%;
  --stone-eye-rx: 5.8%;
  --stone-eye-ry: 3.4%;
  --stone-torch-left: 17.3%;
  --stone-torch-right: 83%;
  --stone-torch-y: 55%;
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(100vw, 100vh);
  width: min(100vw, 100svh);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  isolation: isolate;
  pointer-events: none;
  filter: brightness(.45) saturate(.8);
  animation: od-startup-exposure var(--stone-scene-duration) linear forwards;
}
.od-startup-stone,
.od-startup-stone > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
/* The optional floor plate is selected and exposed only for ultrawide screens. */
.od-startup-floor-repair { display: none; }
/* Only the opening quotation glyph changes; the rest of the master stays fixed. */
.od-startup-repair {
  /* Union of seal-removal ellipse (50,71.5; radius11.4) and stair rectangle
     (35.5,73;29x11). A .35-unit feather avoids seams on the original stone. */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cfilter id='soft' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='.35'/%3E%3C/filter%3E%3C/defs%3E%3Cg fill='white' filter='url(%23soft)'%3E%3Cellipse cx='50' cy='71.5' rx='11.4' ry='11.4'/%3E%3Crect x='35.5' y='73' width='29' height='11'/%3E%3C/g%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cfilter id='soft' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='.35'/%3E%3C/filter%3E%3C/defs%3E%3Cg fill='white' filter='url(%23soft)'%3E%3Cellipse cx='50' cy='71.5' rx='11.4' ry='11.4'/%3E%3Crect x='35.5' y='73' width='29' height='11'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.od-startup-quote {
  -webkit-mask-image: radial-gradient(ellipse 1.8% 2.3% at 61% 5.6%, #000 70%, transparent 100%);
  mask-image: radial-gradient(ellipse 1.8% 2.3% at 61% 5.6%, #000 70%, transparent 100%);
}

/* The original wall stays visible: a regenerated wall patch can leave an oval. */
.od-startup-side-off {
  display: none;
}

/* Opaque flame/basket covers stay in place until the original flame has grown.
   The warm source matches the fixed wall; uniform night grading removes its
   cast light without repainting the stone in small, visibly different ovals. */
.od-startup-torch-off {
  -webkit-mask-image: radial-gradient(ellipse 3.5% 7.5% at var(--stone-torch-left) 53%, #000 94%, transparent 100%), radial-gradient(ellipse 3.5% 7.5% at var(--stone-torch-right) 53%, #000 94%, transparent 100%);
  mask-image: radial-gradient(ellipse 3.5% 7.5% at var(--stone-torch-left) 53%, #000 94%, transparent 100%), radial-gradient(ellipse 3.5% 7.5% at var(--stone-torch-right) 53%, #000 94%, transparent 100%);
  animation: od-startup-flame-uncover var(--stone-scene-duration) linear forwards;
}
.od-startup-eye-closed,
.od-startup-eye {
  -webkit-mask-image: radial-gradient(ellipse var(--stone-eye-rx) var(--stone-eye-ry) at var(--stone-eye-x) var(--stone-eye-y), #000 78%, transparent 100%);
  mask-image: radial-gradient(ellipse var(--stone-eye-rx) var(--stone-eye-ry) at var(--stone-eye-x) var(--stone-eye-y), #000 78%, transparent 100%);
}
.od-startup-eye-closed { animation: od-startup-eye-cover var(--stone-scene-duration) linear forwards; }
.od-startup-eye {
  opacity: 0;
  clip-path: ellipse(var(--stone-eye-rx) .01% at var(--stone-eye-x) var(--stone-eye-y));
  animation: od-startup-eye-open var(--stone-scene-duration) linear forwards;
}

.od-startup-torch {
  position: absolute;
  inset: 0;
  z-index: 6;
  /* Two soft bounds meet at the basket with zero initial area, then expand.
     A single upward gradient leaks warm wall below an unlit basket; a hard
     ellipse instead leaves a bright horizontal cut in the photographic stone. */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 .5%, #000);
  mask-image: linear-gradient(to bottom, transparent, #000 .5%, #000);
  -webkit-mask-size: 100% 200%;
  mask-size: 100% 200%;
  -webkit-mask-position: 0 -55.2%;
  mask-position: 0 -55.2%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: od-startup-torch-rise var(--stone-scene-duration) linear forwards;
}
.od-startup-torch-left { --stone-flame-x: var(--stone-torch-left); }
.od-startup-torch-right { --stone-flame-x: var(--stone-torch-right); }
.od-startup-torch-window {
  /* Nested masks make the intersection explicit in both Safari and Chromium. */
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(to top, transparent, #000 .5%, #000);
  mask-image: linear-gradient(to top, transparent, #000 .5%, #000);
  -webkit-mask-size: 100% 200%;
  mask-size: 100% 200%;
  -webkit-mask-position: 0 144.8%;
  mask-position: 0 144.8%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: od-startup-torch-lower var(--stone-scene-duration) linear forwards;
}
.od-startup-torch-foundation {
  /* This is the actual photograph at full opacity, progressively uncovered
     upward from the basket. Its real flame never appears as a pale ghost. */
  -webkit-mask-image: radial-gradient(ellipse 1.8% 4.6% at var(--stone-flame-x) 52.3%, #000 70%, transparent 100%);
  mask-image: radial-gradient(ellipse 1.8% 4.6% at var(--stone-flame-x) 52.3%, #000 70%, transparent 100%);
  clip-path: inset(0 0 44.4% 0);
}
.od-startup-flame {
  /* A faint tip-only movement sits over the intact original. No extraction,
     color threshold or white-core replacement can change the approved fire. */
  -webkit-mask-image: radial-gradient(ellipse 1.7% 3.4% at var(--stone-flame-x) 51.5%, #000 12%, transparent 100%);
  mask-image: radial-gradient(ellipse 1.7% 3.4% at var(--stone-flame-x) 51.5%, #000 12%, transparent 100%);
  transform-origin: var(--stone-flame-x) 55.1%;
  opacity: .08;
  animation: od-startup-fire-breathe 1.37s ease-in-out .6s infinite;
}
.od-startup-torch-right .od-startup-flame { animation-duration: 1.73s; }
.od-startup-night {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: #2545ad;
  mix-blend-mode: multiply;
  opacity: 1;
  animation: od-startup-night-release var(--stone-scene-duration) linear forwards;
}

.od-startup-medallion {
  position: absolute;
  top: var(--stone-seal-y);
  left: var(--stone-seal-x);
  width: var(--stone-seal-size);
  /* The supplied transparent medallion is shown intact. */
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}
.od-startup-medallion > img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  filter: none;
}


/* One warm reflection, clipped to the unchanged alpha medallion. Only the light moves. */
.od-startup-medallion::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  visibility: hidden;
  background: linear-gradient(110deg, transparent 37%, rgba(255, 230, 168, .02) 43%, rgba(255, 246, 215, .26) 49%, transparent 56%);
  background-size: 250% 100%;
  background-position: 150% 0;
  -webkit-mask-image: url('/startup/gran-logia-user-medallion-v1.webp');
  mask-image: url('/startup/gran-logia-user-medallion-v1.webp');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  opacity: 0;
  animation: od-startup-medallion-sheen var(--stone-scene-duration) linear forwards;
  animation-play-state: paused;
}
.od-startup-screen[data-art-ready='true'] .od-startup-medallion::after { animation-play-state: running; }
@keyframes od-startup-medallion-sheen {
  0%, 37.5% { opacity: 0; visibility: hidden; background-position: 150% 0; }
  42.5% { opacity: .8; visibility: visible; background-position: 130% 0; }
  60% { opacity: 1; visibility: visible; background-position: 50% 0; }
  82.5% { opacity: .8; visibility: visible; background-position: -35% 0; }
  92.5%, 100% { opacity: 0; visibility: hidden; background-position: -50% 0; }
}

.od-startup-emblem,
.od-startup-wordmark { display: none; }
.od-startup-stage {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 100%;
  height: 100%;
  justify-content: flex-end;
  padding: 0 24px max(22px, env(safe-area-inset-bottom));
  pointer-events: none;
}
.od-startup-progress,
.od-startup-status,
.od-startup-stage small { position: static; inset: auto; }
.od-startup-progress { margin: 20px 0 12px; background: rgba(235, 207, 156, .24); }
.od-startup-progress span { background: #c8ac7b; }
.od-startup-status { color: #f0eee7; font-size: 14px; }
.od-startup-stage small { margin-top: 10px; color: #d4d9d6; font-size: 12px; }

/* Pause every art timeline at its first frame until all local artwork decodes. */
.od-startup-screen[data-art-ready='false']::before,
.od-startup-screen[data-art-ready='false'] .od-startup-art,
.od-startup-screen[data-art-ready='false'] .od-startup-art * { animation-play-state: paused !important; }

/* One exact 4s clock: anticipation 0–.616s; warmth reaches full at 3.4s;
   the eye finishes at 4s. No extra hold after decoding. */
@keyframes od-startup-exposure {
  0%, 15.4% { filter: brightness(.45) saturate(.8); }
  30% { filter: brightness(.55) saturate(.86); }
  50% { filter: brightness(.72) saturate(.92); }
  70% { filter: brightness(.9) saturate(1); }
  85%, 100% { filter: brightness(1) saturate(1); }
}
@keyframes od-startup-ambient-exposure {
  0%, 15.4% { filter: blur(24px) brightness(.45) saturate(.8); }
  30% { filter: blur(24px) brightness(.55) saturate(.86); }
  50% { filter: blur(24px) brightness(.72) saturate(.92); }
  70% { filter: blur(24px) brightness(.9) saturate(1); }
  85%, 100% { filter: blur(24px) brightness(1) saturate(1); }
}
@keyframes od-startup-flame-uncover { 0%, 70% { opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes od-startup-night-release { 0%, 15.4% { opacity: 1; } 30% { opacity: .88; } 50% { opacity: .58; } 70% { opacity: .2; } 85%, 100% { opacity: 0; } }
@keyframes od-startup-torch-rise {
  0%, 15.4% { -webkit-mask-position: 0 -55.2%; mask-position: 0 -55.2%; }
  30% { -webkit-mask-position: 0 -54%; mask-position: 0 -54%; }
  45% { -webkit-mask-position: 0 -51.7%; mask-position: 0 -51.7%; }
  60% { -webkit-mask-position: 0 -48.2%; mask-position: 0 -48.2%; }
  75%, 100% { -webkit-mask-position: 0 -41.2%; mask-position: 0 -41.2%; }
}
@keyframes od-startup-torch-lower {
  0%, 15.4% { -webkit-mask-position: 0 144.8%; mask-position: 0 144.8%; }
  30% { -webkit-mask-position: 0 143.2%; mask-position: 0 143.2%; }
  45% { -webkit-mask-position: 0 140.5%; mask-position: 0 140.5%; }
  60% { -webkit-mask-position: 0 136.8%; mask-position: 0 136.8%; }
  75%, 100% { -webkit-mask-position: 0 130.8%; mask-position: 0 130.8%; }
}
@keyframes od-startup-eye-cover { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes od-startup-eye-open {
  0%, 15.4% { opacity: 0; clip-path: ellipse(var(--stone-eye-rx) .01% at var(--stone-eye-x) var(--stone-eye-y)); }
  30% { opacity: .6; clip-path: ellipse(var(--stone-eye-rx) .3% at var(--stone-eye-x) var(--stone-eye-y)); }
  45% { opacity: 1; clip-path: ellipse(var(--stone-eye-rx) .7% at var(--stone-eye-x) var(--stone-eye-y)); }
  65% { opacity: 1; clip-path: ellipse(var(--stone-eye-rx) 1.7% at var(--stone-eye-x) var(--stone-eye-y)); }
  85% { opacity: 1; clip-path: ellipse(var(--stone-eye-rx) 2.7% at var(--stone-eye-x) var(--stone-eye-y)); }
  100% { opacity: 1; clip-path: ellipse(var(--stone-eye-rx) var(--stone-eye-ry) at var(--stone-eye-x) var(--stone-eye-y)); }
}
@keyframes od-startup-fire-breathe {
  0%, 100% { opacity: .08; transform: skewX(-.04deg) scaleY(.997); }
  13% { opacity: .12; transform: skewX(.06deg) scaleY(1.006); }
  29% { opacity: .06; transform: skewX(-.05deg) scaleY(.995); }
  46% { opacity: .1; transform: skewX(.03deg) scaleY(1.003); }
  63% { opacity: .07; transform: skewX(-.06deg) scaleY(.996); }
  81% { opacity: .11; transform: skewX(.05deg) scaleY(1.005); }
}


@media (max-width: 820px) and (max-aspect-ratio: 3/4) and (hover: hover) and (pointer: fine), (max-aspect-ratio: 2/3) and (hover: none), (max-aspect-ratio: 2/3) and (pointer: coarse) {
.od-startup-screen::before {
  background-image: linear-gradient(rgba(3, 17, 29, .7), rgba(3, 17, 29, .86)), url('/startup/startup-stone-portrait-v1.webp');
}
.od-startup-art {
  --stone-art-ratio: 0.4615384615;
  --stone-seal-y: 61.3%;
  --stone-seal-size: 40.5%;
  --stone-eye-y: 43.3%;
  --stone-eye-rx: 6.5%;
  --stone-eye-ry: 1.7%;
  --stone-torch-left: 17.6%;
  --stone-torch-right: 81.8%;
  --stone-torch-y: 44.8%;
  /* Fine-pointer windows retain the complete portrait; touch cover is applied below. */
  width: min(100vw, 46.153846vh);
  width: min(100vw, 46.153846svh);
  aspect-ratio: 852 / 1846;
}
.od-startup-repair {
  /* The original baked medal and its edge shadow are wholly inpainted. */
  -webkit-mask-image: radial-gradient(ellipse 22% 10.5% at 50% 61.3%, #000 95%, transparent 100%);
  mask-image: radial-gradient(ellipse 22% 10.5% at 50% 61.3%, #000 95%, transparent 100%);
}
.od-startup-torch-off {
  -webkit-mask-image: radial-gradient(ellipse 4.4% 6.5% at var(--stone-torch-left) 42%, #000 94%, transparent 100%), radial-gradient(ellipse 4.4% 6.5% at var(--stone-torch-right) 42%, #000 94%, transparent 100%);
  mask-image: radial-gradient(ellipse 4.4% 6.5% at var(--stone-torch-left) 42%, #000 94%, transparent 100%), radial-gradient(ellipse 4.4% 6.5% at var(--stone-torch-right) 42%, #000 94%, transparent 100%);
}
.od-startup-eye { animation-name: od-portrait-eye-open; }
.od-startup-torch {
  -webkit-mask-position: 0 -44.8%;
  mask-position: 0 -44.8%;
  animation-name: od-portrait-torch-rise;
}
.od-startup-torch-window {
  -webkit-mask-position: 0 155.2%;
  mask-position: 0 155.2%;
  animation-name: od-portrait-torch-lower;
}
.od-startup-torch-foundation {
  -webkit-mask-image: radial-gradient(ellipse 3% 3.8% at var(--stone-flame-x) 41.8%, #000 75%, transparent 100%);
  mask-image: radial-gradient(ellipse 3% 3.8% at var(--stone-flame-x) 41.8%, #000 75%, transparent 100%);
  clip-path: inset(0 0 55.05% 0);
}
.od-startup-flame {
  -webkit-mask-image: radial-gradient(ellipse 3% 3.6% at var(--stone-flame-x) 41.3%, #000 12%, transparent 100%);
  mask-image: radial-gradient(ellipse 3% 3.6% at var(--stone-flame-x) 41.3%, #000 12%, transparent 100%);
  transform-origin: var(--stone-flame-x) 44.8%;
}
@keyframes od-portrait-torch-rise {
  0%, 15.4% { -webkit-mask-position: 0 -44.8%; mask-position: 0 -44.8%; }
  30% { -webkit-mask-position: 0 -44%; mask-position: 0 -44%; }
  45% { -webkit-mask-position: 0 -42.5%; mask-position: 0 -42.5%; }
  60% { -webkit-mask-position: 0 -40.2%; mask-position: 0 -40.2%; }
  75%, 100% { -webkit-mask-position: 0 -35.6%; mask-position: 0 -35.6%; }
}
@keyframes od-portrait-torch-lower {
  0%, 15.4% { -webkit-mask-position: 0 155.2%; mask-position: 0 155.2%; }
  30% { -webkit-mask-position: 0 154.2%; mask-position: 0 154.2%; }
  45% { -webkit-mask-position: 0 152.4%; mask-position: 0 152.4%; }
  60% { -webkit-mask-position: 0 150%; mask-position: 0 150%; }
  75%, 100% { -webkit-mask-position: 0 146%; mask-position: 0 146%; }
}
@keyframes od-portrait-eye-open {
  0%, 15.4% { opacity: 0; clip-path: ellipse(var(--stone-eye-rx) .01% at var(--stone-eye-x) var(--stone-eye-y)); }
  30% { opacity: .6; clip-path: ellipse(var(--stone-eye-rx) .15% at var(--stone-eye-x) var(--stone-eye-y)); }
  45% { opacity: 1; clip-path: ellipse(var(--stone-eye-rx) .35% at var(--stone-eye-x) var(--stone-eye-y)); }
  65% { opacity: 1; clip-path: ellipse(var(--stone-eye-rx) .85% at var(--stone-eye-x) var(--stone-eye-y)); }
  85% { opacity: 1; clip-path: ellipse(var(--stone-eye-rx) 1.35% at var(--stone-eye-x) var(--stone-eye-y)); }
  100% { opacity: 1; clip-path: ellipse(var(--stone-eye-rx) var(--stone-eye-ry) at var(--stone-eye-x) var(--stone-eye-y)); }
}

.od-startup-quote { display: none; }
}

/* Wide desktop and compact/wide touch composition, registered to the approved 1672 × 941 master. */
@media (min-width: 960px) and (min-aspect-ratio: 4/3) and (hover: hover) and (pointer: fine), (min-aspect-ratio: 2/3) and (hover: none), (min-aspect-ratio: 2/3) and (pointer: coarse) {
  .od-startup-screen::before {
    background-image: linear-gradient(rgba(3, 17, 29, .7), rgba(3, 17, 29, .86)), url('/startup/startup-stone-desktop-v1.webp');
  }
  .od-startup-art {
    --stone-art-ratio: 1.7768331562;
    --stone-seal-y: 64.9%;
    --stone-seal-size: 13%;
    --stone-eye-y: 48.35%;
    --stone-eye-rx: 3.1%;
    --stone-eye-ry: 2.3%;
    --stone-torch-left: 32.66%;
    --stone-torch-right: 67.16%;
    --stone-torch-y: 50.5%;
    /* Contain the complete arch and floor star, including on 4:3 desktop windows. */
    width: min(100vw, 177.6833156vh);
    width: min(100vw, 177.6833156svh);
    aspect-ratio: 1672 / 941;
  }
  .od-startup-repair {
    -webkit-mask-image: radial-gradient(ellipse 7% 12.5% at 50% 64.9%, #000 94%, transparent 100%);
    mask-image: radial-gradient(ellipse 7% 12.5% at 50% 64.9%, #000 94%, transparent 100%);
  }
  .od-startup-quote { display: none; }
  .od-startup-torch-off {
    -webkit-mask-image: radial-gradient(ellipse 1.7% 6.8% at var(--stone-torch-left) 47.4%, #000 94%, transparent 100%), radial-gradient(ellipse 1.7% 6.8% at var(--stone-torch-right) 47.4%, #000 94%, transparent 100%);
    mask-image: radial-gradient(ellipse 1.7% 6.8% at var(--stone-torch-left) 47.4%, #000 94%, transparent 100%), radial-gradient(ellipse 1.7% 6.8% at var(--stone-torch-right) 47.4%, #000 94%, transparent 100%);
  }
  .od-startup-eye { animation-name: od-desktop-eye-open; }
  .od-startup-torch {
    -webkit-mask-position: 0 -50.5%;
    mask-position: 0 -50.5%;
    animation-name: od-desktop-torch-rise;
  }
  .od-startup-torch-window {
    -webkit-mask-position: 0 149.5%;
    mask-position: 0 149.5%;
    animation-name: od-desktop-torch-lower;
  }
  .od-startup-torch-foundation {
    -webkit-mask-image: radial-gradient(ellipse 1.5% 5.6% at var(--stone-flame-x) 47%, #000 70%, transparent 100%);
    mask-image: radial-gradient(ellipse 1.5% 5.6% at var(--stone-flame-x) 47%, #000 70%, transparent 100%);
    clip-path: inset(0 0 48.8% 0);
  }
  .od-startup-flame {
    -webkit-mask-image: radial-gradient(ellipse 1.4% 4.4% at var(--stone-flame-x) 46.5%, #000 12%, transparent 100%);
    mask-image: radial-gradient(ellipse 1.4% 4.4% at var(--stone-flame-x) 46.5%, #000 12%, transparent 100%);
    transform-origin: var(--stone-flame-x) 50.5%;
  }
  @keyframes od-desktop-torch-rise {
    0%, 15.4% { -webkit-mask-position: 0 -50.5%; mask-position: 0 -50.5%; }
    30% { -webkit-mask-position: 0 -49.3%; mask-position: 0 -49.3%; }
    45% { -webkit-mask-position: 0 -47%; mask-position: 0 -47%; }
    60% { -webkit-mask-position: 0 -43.5%; mask-position: 0 -43.5%; }
    75%, 100% { -webkit-mask-position: 0 -36.5%; mask-position: 0 -36.5%; }
  }
  @keyframes od-desktop-torch-lower {
    0%, 15.4% { -webkit-mask-position: 0 149.5%; mask-position: 0 149.5%; }
    30% { -webkit-mask-position: 0 147.9%; mask-position: 0 147.9%; }
    45% { -webkit-mask-position: 0 145.2%; mask-position: 0 145.2%; }
    60% { -webkit-mask-position: 0 141.5%; mask-position: 0 141.5%; }
    75%, 100% { -webkit-mask-position: 0 135.5%; mask-position: 0 135.5%; }
  }
  @keyframes od-desktop-eye-open {
    0%, 15.4% { opacity: 0; clip-path: ellipse(var(--stone-eye-rx) .01% at var(--stone-eye-x) var(--stone-eye-y)); }
    30% { opacity: .6; clip-path: ellipse(var(--stone-eye-rx) .2% at var(--stone-eye-x) var(--stone-eye-y)); }
    45% { opacity: 1; clip-path: ellipse(var(--stone-eye-rx) .47% at var(--stone-eye-x) var(--stone-eye-y)); }
    65% { opacity: 1; clip-path: ellipse(var(--stone-eye-rx) 1.15% at var(--stone-eye-x) var(--stone-eye-y)); }
    85% { opacity: 1; clip-path: ellipse(var(--stone-eye-rx) 1.83% at var(--stone-eye-x) var(--stone-eye-y)); }
    100% { opacity: 1; clip-path: ellipse(var(--stone-eye-rx) var(--stone-eye-ry) at var(--stone-eye-x) var(--stone-eye-y)); }
  }
}

/* Ultrawide source C keeps the same four-second lighting mechanics and alpha medal. */
@media (min-width: 960px) and (min-aspect-ratio: 2/1) and (hover: hover) and (pointer: fine) {
  .od-startup-screen::before {
    background-image: linear-gradient(rgba(3, 17, 29, .7), rgba(3, 17, 29, .86)), url('/startup/ultrawide-floor-v3.webp');
  }
  .od-startup-art {
    --stone-art-ratio: 2.1448598131;
    --stone-seal-y: 66.7%;
    --stone-seal-size: 11.2%;
    --stone-eye-y: 49.5%;
    --stone-eye-rx: 2.6%;
    --stone-eye-ry: 2.3%;
    --stone-torch-left: 35.45%;
    --stone-torch-right: 64.6%;
    --stone-torch-y: 51.3%;
    width: min(100vw, 214.4859813vh);
    width: min(100vw, 214.4859813svh);
    aspect-ratio: 1836 / 856;
  }
  .od-startup-floor-repair {
    display: block;
    /* Two narrow floor stripes only: preserve the central star and entrance reflections. */
    -webkit-mask-image: radial-gradient(ellipse 4.5% 11% at 23% 91.4%, #000 92%, transparent 100%), radial-gradient(ellipse 4.5% 11% at 77.7% 91.4%, #000 92%, transparent 100%);
    mask-image: radial-gradient(ellipse 4.5% 11% at 23% 91.4%, #000 92%, transparent 100%), radial-gradient(ellipse 4.5% 11% at 77.7% 91.4%, #000 92%, transparent 100%);
  }
  .od-startup-repair {
    -webkit-mask-image: radial-gradient(ellipse 6.3% 13% at 50% 66.7%, #000 94%, transparent 100%);
    mask-image: radial-gradient(ellipse 6.3% 13% at 50% 66.7%, #000 94%, transparent 100%);
  }
  .od-startup-torch-off {
    -webkit-mask-image: radial-gradient(ellipse 1.5% 6.8% at var(--stone-torch-left) 47.4%, #000 94%, transparent 100%), radial-gradient(ellipse 1.5% 6.8% at var(--stone-torch-right) 47.4%, #000 94%, transparent 100%);
    mask-image: radial-gradient(ellipse 1.5% 6.8% at var(--stone-torch-left) 47.4%, #000 94%, transparent 100%), radial-gradient(ellipse 1.5% 6.8% at var(--stone-torch-right) 47.4%, #000 94%, transparent 100%);
  }
  .od-startup-torch {
    -webkit-mask-position: 0 -51.3%;
    mask-position: 0 -51.3%;
    animation-name: od-ultrawide-torch-rise;
  }
  .od-startup-torch-window {
    -webkit-mask-position: 0 148.7%;
    mask-position: 0 148.7%;
    animation-name: od-ultrawide-torch-lower;
  }
  .od-startup-torch-foundation {
    -webkit-mask-image: radial-gradient(ellipse 1.3% 5.6% at var(--stone-flame-x) 47.8%, #000 70%, transparent 100%);
    mask-image: radial-gradient(ellipse 1.3% 5.6% at var(--stone-flame-x) 47.8%, #000 70%, transparent 100%);
    clip-path: inset(0 0 48% 0);
  }
  .od-startup-flame {
    -webkit-mask-image: radial-gradient(ellipse 1.2% 4.4% at var(--stone-flame-x) 47.3%, #000 12%, transparent 100%);
    mask-image: radial-gradient(ellipse 1.2% 4.4% at var(--stone-flame-x) 47.3%, #000 12%, transparent 100%);
    transform-origin: var(--stone-flame-x) 51.3%;
  }
  @keyframes od-ultrawide-torch-rise {
    0%, 15.4% { -webkit-mask-position: 0 -51.3%; mask-position: 0 -51.3%; }
    30% { -webkit-mask-position: 0 -50.1%; mask-position: 0 -50.1%; }
    45% { -webkit-mask-position: 0 -47.8%; mask-position: 0 -47.8%; }
    60% { -webkit-mask-position: 0 -44.3%; mask-position: 0 -44.3%; }
    75%, 100% { -webkit-mask-position: 0 -37.3%; mask-position: 0 -37.3%; }
  }
  @keyframes od-ultrawide-torch-lower {
    0%, 15.4% { -webkit-mask-position: 0 148.7%; mask-position: 0 148.7%; }
    30% { -webkit-mask-position: 0 147.1%; mask-position: 0 147.1%; }
    45% { -webkit-mask-position: 0 144.4%; mask-position: 0 144.4%; }
    60% { -webkit-mask-position: 0 140.7%; mask-position: 0 140.7%; }
    75%, 100% { -webkit-mask-position: 0 134.7%; mask-position: 0 134.7%; }
  }
}

/* Fill touch windows with one uniformly scaled, registered assembly, including scope loads. */
@media (hover: none), (pointer: coarse) {
  .od-startup-art {
    width: max(100vw, calc(100vh * var(--stone-art-ratio)));
    width: max(100vw, calc(100dvh * var(--stone-art-ratio)));
  }
}

/* Native tablets with a connected trackpad still fill launch and later workspace loads. */
html[data-native-platform] .od-startup-art {
  width: max(100vw, calc(100vh * var(--stone-art-ratio)));
  width: max(100vw, calc(100dvh * var(--stone-art-ratio)));
}

/* Do not expose partial artwork while the selected sources decode. */
.od-startup-screen[data-art-ready='false'] .od-startup-art { visibility: hidden; }
/* Native handoff paints the cold frame first; art-ready still owns all animation clocks. */
.od-startup-screen.is-native[data-art-ready='false'][data-art-decoded='true'] .od-startup-art { visibility: visible; }
/* The complete viewport remains the art's anchor on the closed Duo as well. */
html[data-duo-closed='true'] .od-startup-art { top: 50%; left: 50%; }

/* Scope changes show the completed scene with no launch clock or hold. */
.od-startup-screen.is-workspace .od-startup-medallion::after { display: none; animation: none; }
.od-startup-screen.is-workspace::before { filter: blur(24px) brightness(1) saturate(1); animation: none; }
.is-workspace .od-startup-art,
.is-workspace .od-startup-art * { animation: none; }
.is-workspace .od-startup-art { filter: brightness(1) saturate(1); }
.is-workspace .od-startup-torch-off,
.is-workspace .od-startup-eye-closed,
.is-workspace .od-startup-night,
.is-workspace .od-startup-torch { display: none; }
.is-workspace .od-startup-eye { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .od-startup-medallion::after { display: none; animation: none !important; }
  .od-startup-screen, .od-startup-screen::before, .od-startup-screen::after, .od-startup-screen * { animation: none !important; }
  .od-startup-screen::before { filter: blur(24px) brightness(1) saturate(1); }
  .od-startup-art { filter: brightness(1) saturate(1); }
  .od-startup-torch-off, .od-startup-eye-closed, .od-startup-night, .od-startup-torch { display: none; }
  .od-startup-eye { opacity: 0; }
  .od-startup-screen.is-leaving { opacity: 0; }
}