@ash-qw/dsh-theme-prts 0.1.97 → 0.1.98

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ash-qw/dsh-theme-prts",
-  "version": "0.1.97",
+  "version": "0.1.98",
   "private": false,
   "type": "module",
   "description": "Unofficial Arknights P.R.T.S.-inspired UI theme for DeepSeek Harness Web",

package/src/client/composer-glass-adapter.js

@@ -2,8 +2,13 @@ const CONTROL_ATTRIBUTE = 'data-prts-glass-control'
 const MENU_ATTRIBUTE = 'data-prts-glass-menu'
 const FALLBACK_COMPOSER_ATTRIBUTE = 'data-prts-composer-fallback'
 const COMPOSER_SIGNAL_ATTRIBUTE = 'data-prts-composer-signal'
+const FALLBACK_COMPOSER_ROOT_SELECTOR = [
+  '[data-slot="conversation.composer"]',
+  '[data-composer-seat]',
+].join(', ')
 const COMPOSER_RELEVANCE_SELECTOR = [
   '[data-composer-card]',
+  FALLBACK_COMPOSER_ROOT_SELECTOR,
   'form textarea',
   'button[aria-haspopup="menu"]',
   'button[aria-haspopup="listbox"]',
@@ -56,6 +61,18 @@ function markPopup(popup, kind) {
   }
 }
 
+function fallbackComposerForms(document) {
+  const forms = new Set()
+  for (const root of document?.querySelectorAll?.(FALLBACK_COMPOSER_ROOT_SELECTOR) ?? []) {
+    if (root.querySelector('[data-composer-card]')) continue
+    for (const textarea of root.querySelectorAll('form textarea')) {
+      const form = textarea.closest('form')
+      if (form && root.contains(form)) forms.add(form)
+    }
+  }
+  return forms
+}
+
 export function createComposerGlassAdapter({ document, window }) {
   let observer
   let scanFrame
@@ -104,17 +121,17 @@ export function createComposerGlassAdapter({ document, window }) {
       signal.remove?.()
       ownedSignals.delete(signal)
     }
+    const fallbackForms = fallbackComposerForms(document)
     for (const form of [...ownedFallbacks]) {
-      if (!form.isConnected || form.hasAttribute('data-composer-card')) {
-        form.removeAttribute?.(FALLBACK_COMPOSER_ATTRIBUTE)
-        ownedFallbacks.delete(form)
-      }
+      if (form.isConnected && fallbackForms.has(form) && !form.hasAttribute('data-composer-card')) continue
+      form.removeAttribute?.(FALLBACK_COMPOSER_ATTRIBUTE)
+      ownedFallbacks.delete(form)
+      if (form.hasAttribute('data-composer-card')) continue
+      const signal = form.querySelector?.(`:scope > [${COMPOSER_SIGNAL_ATTRIBUTE}]`)
+      if (!ownedSignals.has(signal)) continue
+      signal.remove?.()
+      ownedSignals.delete(signal)
     }
-    const fallbackForms = new Set(
-      [...(document?.querySelectorAll?.('form textarea') ?? [])]
-        .map(textarea => textarea.closest('form'))
-        .filter(form => form && !form.querySelector('[data-composer-card]')),
-    )
     for (const form of fallbackForms) {
       form.setAttribute(FALLBACK_COMPOSER_ATTRIBUTE, '')
       ownedFallbacks.add(form)

package/src/client/index.js

@@ -44,7 +44,6 @@ export function applyPrtsPlugin(ctx, environment) {
   const safeMode = isSafeMode(window?.location?.search ?? '')
   const storage = window?.localStorage
   const themeService = contextService(ctx, 'theme')
-  const startup = createPrtsStartupSequence({ document, window, prtsEmblem: assets.prtsEmblem, rhodesEmblem: assets.emblem, timings: startupTimings })
   const composerGlass = createComposerGlassAdapter({ document, window })
   const assistantGlass = createAssistantGlassAdapter({
     document,
@@ -62,6 +61,19 @@ export function applyPrtsPlugin(ctx, environment) {
       sync()
     },
   })
+  const startup = createPrtsStartupSequence({
+    document,
+    window,
+    prtsEmblem: assets.prtsEmblem,
+    rhodesEmblem: assets.emblem,
+    timings: startupTimings,
+    onActiveChange(active) {
+      particleField.setStartupActive(active)
+    },
+    onReady() {
+      particleField.setStartupActive(false)
+    },
+  })
   const theme = createThemeController({
     document,
     window,
@@ -144,6 +156,7 @@ export function applyPrtsPlugin(ctx, environment) {
   }
 
   const disposeVisualState = () => {
+    particleField.update({ ...preferences, enabled: false })
     startup.stop({ restoreFocus: false })
     stopStartupReadyWatch()
     stopMountWatch()
@@ -151,7 +164,6 @@ export function applyPrtsPlugin(ctx, environment) {
     disposeOperations()
     composerGlass.dispose()
     assistantGlass.dispose()
-    particleField.update({ ...preferences, enabled: false })
     toBottom.dispose()
     conversationControls.dispose()
     layoutDiagnostics.dispose()
@@ -227,9 +239,11 @@ export function applyPrtsPlugin(ctx, environment) {
       phase: result.persisted ? 'saved' : 'error',
       revision: settingsPersistence.revision + 1,
     }
+    const shouldPlayStartup = !safeMode && !wasEnabled && preferences.enabled && preferences.bootAnimation
+    if (shouldPlayStartup) particleField.setStartupActive(true)
     applyVisualState()
     sync()
-    if (!safeMode && !wasEnabled && preferences.enabled && preferences.bootAnimation) startup.play()
+    if (shouldPlayStartup && !startup.play()) particleField.setStartupActive(false)
   }
 
 
@@ -302,13 +316,13 @@ export function applyPrtsPlugin(ctx, environment) {
   }
   ctx.effect(() => () => {
     statusSource.dispose()
+    particleField.dispose()
     startup.dispose({ restoreFocus: false })
     stopStartupReadyWatch()
     stopMountWatch()
     disposeOperations()
     composerGlass.dispose()
     assistantGlass.dispose()
-    particleField.dispose()
     toBottom.dispose()
     conversationControls.dispose()
     layoutDiagnostics.dispose()

package/src/client/operations-shell-v2.js

@@ -27,7 +27,10 @@ function markup(emblem) {
           <svg data-prts-scheme-icon="dark" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.2 15.4A8.4 8.4 0 0 1 8.6 3.8 8.5 8.5 0 1 0 20.2 15.4Z"></path></svg>
           <small>明暗</small>
         </button>
-        <button type="button" data-prts-theme-disable aria-label="关闭 P.R.T.S. 主题"><b aria-hidden="true">×</b><small>关闭主题</small></button>
+        <button type="button" data-prts-theme-disable aria-label="退出 P.R.T.S.，返回 Harness 原生界面">
+          <svg data-prts-theme-disable-icon viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3v8"></path><path d="M7.1 6.8a7 7 0 1 0 9.8 0"></path></svg>
+          <small>退出 P.R.T.S.</small>
+        </button>
       </div>
     </nav>
     ${themeSettingsMarkup()}

package/src/client/particle-field-adapter.js

@@ -326,7 +326,7 @@ export function createParticleFieldAdapter({ document, window, emblem = '', embl
   const rhodesIndex = Math.max(0, emblemSequence.findIndex(entry => entry.key === 'rhodes-island'))
   const suppliedHeroMask = normalizeEmblemMasks(heroEmblemMask ? [heroEmblemMask] : [], window).get('rhodes-island-hero')
   const empty = { mounted: false, hero: false, side: -1, transition: null, anchor: { horizontalProgress: 0, verticalProgress: 0 }, phase: 'error', error: '徽记资源异常' }
-  if (!document || !window) return { update() {}, setSchemeTransitionActive() {}, inspect: () => empty, dispose() {} }
+  if (!document || !window) return { update() {}, setStartupActive() {}, setSchemeTransitionActive() {}, inspect: () => empty, dispose() {} }
 
   let preferences = {}
   let operation
@@ -396,6 +396,7 @@ export function createParticleFieldAdapter({ document, window, emblem = '', embl
   let pauseStartedAt
   let hydrationPaused = false
   let schemeTransitionPaused = false
+  let startupPaused = false
   let hydrationTimer
   let hydrationFrame
   let hydrationStableFrames = 0
@@ -429,7 +430,7 @@ export function createParticleFieldAdapter({ document, window, emblem = '', embl
     : preferences.conversationParticleDensity
   const densityProfile = density => PARTICLE_DENSITY_PROFILES[density] ?? PARTICLE_DENSITY_PROFILES.standard
   const particleRadius = density => densityProfile(density ?? activeDensity()).radius
-  const canRenderFrame = () => !disposed && documentVisible && canvasVisible && !hydrationPaused && !schemeTransitionPaused && !resizing
+  const canRenderFrame = () => !disposed && documentVisible && canvasVisible && !hydrationPaused && !startupPaused && !schemeTransitionPaused && !resizing
   const layoutWidth = () => width
   const layoutHeight = () => height
   const layoutShiftX = () => 0
@@ -707,6 +708,7 @@ export function createParticleFieldAdapter({ document, window, emblem = '', embl
   }
 
   function buildParticles() {
+    if (startupPaused) return false
     const selected = populationSource()
     if (!selected.length) {
       reportState({ phase: 'error', error: '徽记资源异常' })
@@ -1646,14 +1648,17 @@ export function createParticleFieldAdapter({ document, window, emblem = '', embl
       cancelFrame()
       return
     }
-    if (pauseStartedAt !== undefined) {
-      resumePausedTimelines(now)
-      if (canvas && particles.length) {
-        syncCanvasBackingStore()
-        cancelFrame()
-        draw(now)
-        return
-      }
+    const resumedFromPause = pauseStartedAt !== undefined
+    if (resumedFromPause) resumePausedTimelines(now)
+    let particlesBuilt = false
+    if (canvas && !particles.length && maskRecords.length) {
+      particlesBuilt = buildParticles()
+    }
+    if (canvas && particles.length && (resumedFromPause || particlesBuilt)) {
+      syncCanvasBackingStore()
+      cancelFrame()
+      draw(now)
+      return
     }
     scheduleFrame()
   }
@@ -1819,6 +1824,12 @@ export function createParticleFieldAdapter({ document, window, emblem = '', embl
   if (!mediaQuery?.addEventListener) mediaQuery?.addListener?.(mediaListener)
   document.addEventListener?.('visibilitychange', onVisibilityChange)
   return {
+    setStartupActive(active) {
+      const next = Boolean(active)
+      if (startupPaused === next) return
+      startupPaused = next
+      updateFrameGate()
+    },
     setSchemeTransitionActive(active) {
       const next = Boolean(active)
       if (schemeTransitionPaused === next) return
@@ -1903,12 +1914,13 @@ export function createParticleFieldAdapter({ document, window, emblem = '', embl
           : transition?.toCount !== undefined
             ? Math.round(transition.fromCount + (transition.toCount - transition.fromCount) * easeInOut(transition.progress))
             : particles.length,
-        targetParticles: transition?.toCount ?? targetParticleCount(),
+        targetParticles: startupPaused && !particles.length ? 0 : transition?.toCount ?? targetParticleCount(),
         density: activeDensity() || 'standard',
         firstFrameReady: canvas?.hasAttribute('data-prts-particle-ready') === true,
         hydrationPaused,
         sleeping: Boolean(context && particles.length && frame === undefined && canRenderFrame() && !motionReduced() && !phoneStatic()),
         schemeTransitionPaused,
+        startupPaused,
         pointer: {
           active: pointerActive,
           clientX: pointerClientX,

package/src/client/preferences.js

@@ -18,7 +18,7 @@ export const DEFAULT_PREFERENCES = Object.freeze({
   particleTraversalSpeed: PARTICLE_TRAVERSAL_SPEED_DEFAULT,
   particlePattern: 'orthogonal',
   railDefaultHidden: false,
-  conversationStyle: 'deck-chat',
+  conversationStyle: 'native',
 })
 
 export const VISUAL_PRESETS = Object.freeze({

package/src/client/startup-sequence.js

@@ -24,7 +24,7 @@ const STARTUP_STAGES = Object.freeze({
 
 function startupMarkup(prtsEmblem = '', rhodesEmblem = '') {
   const ticks = Array.from({ length: 21 }, (_, index) => `<i${index % 5 === 0 ? ' data-major' : ''}></i>`).join('')
-  return `<section data-prts-startup data-stage="boot" popover="manual" role="status" aria-live="assertive" aria-label="P.R.T.S. 启动序列" tabindex="-1">
+  return `<section data-prts-startup data-stage="boot" popover="manual" role="status" aria-live="assertive" aria-label="P.R.T.S. 启动序列">
     <div data-prts-startup-grid aria-hidden="true"></div>
     <div data-prts-startup-scan aria-hidden="true"></div>
     <div data-prts-startup-cut="left" aria-hidden="true"></div>
@@ -73,16 +73,60 @@ function easeOutCubic(value) {
   return 1 - Math.pow(1 - clamp01(value), 3)
 }
 
+function approachProgressAt(elapsed, duration) {
+  if (!(duration > 0)) return 90
+  return 90 * easeOutCubic(elapsed / duration)
+}
+
+function approachVelocityAt(elapsed, duration) {
+  if (!(duration > 0)) return 0
+  const remaining = 1 - clamp01(elapsed / duration)
+  return 270 * remaining * remaining / duration
+}
+
+function finishProgressAt(startProgress, startVelocity, elapsed, duration) {
+  if (!(duration > 0)) return 100
+  const progressDelta = Math.max(0, 100 - startProgress)
+  if (progressDelta === 0) return 100
+  const time = clamp01(elapsed / duration)
+  const timeSquared = time * time
+  const timeCubed = timeSquared * time
+  const startWeight = 2 * timeCubed - 3 * timeSquared + 1
+  const velocityWeight = timeCubed - 2 * timeSquared + time
+  const endWeight = -2 * timeCubed + 3 * timeSquared
+  const startTangent = Math.min(progressDelta * 3, Math.max(0, startVelocity) * duration)
+  const progress = startWeight * startProgress
+    + velocityWeight * startTangent
+    + endWeight * 100
+  return Math.max(startProgress, Math.min(100, progress))
+}
+
 export function findNativeHarnessLoader(document) {
   return document?.querySelector?.('[data-dsh-boot]') ?? null
 }
 
+function matchesOpenTopLayer(node) {
+  for (const selector of [':modal', ':popover-open']) {
+    try {
+      if (node?.matches?.(selector)) return true
+    } catch {}
+  }
+  return false
+}
+
+function hostHasOpenTopLayer(document, overlay) {
+  const candidates = [...(document?.querySelectorAll?.('dialog[open], [popover]') ?? [])]
+  return candidates.some(node => node !== overlay && matchesOpenTopLayer(node))
+}
+
 export function createPrtsStartupSequence({
   document,
   window,
   prtsEmblem = '',
   rhodesEmblem = '',
   timings = PRTS_STARTUP_TIMINGS,
+  onActiveChange = () => {},
+  onReady = () => {},
 } = {}) {
   const schedule = { ...PRTS_STARTUP_TIMINGS, ...timings }
   let overlay
@@ -95,6 +139,7 @@ export function createPrtsStartupSequence({
   let hostReady = false
   let finishStartedAt
   let finishStartedProgress = 0
+  let finishStartedVelocity = 0
   let readyStartedAt
   let exitStartedAt
   let timeoutStartedAt
@@ -102,7 +147,12 @@ export function createPrtsStartupSequence({
   let pendingStage
   let copyTransitionStartedAt
   let lastProgress = -1
+  let lastRoundedProgress = -1
   let useReducedMotion = false
+  let progressFill
+  let progressPercent
+  let activeReported = false
+  let readyReported = false
 
   const now = () => window?.performance?.now?.() ?? Date.now()
   const requestFrame = callback => window?.requestAnimationFrame?.(callback)
@@ -113,6 +163,21 @@ export function createPrtsStartupSequence({
     else window?.clearTimeout?.(id)
   }
 
+  function notify(callback, value) {
+    try {
+      callback(value)
+    } catch {
+      // Startup remains fail-open when an integration callback fails.
+    }
+  }
+
+  function reportActive(active) {
+    const next = Boolean(active)
+    if (activeReported === next) return
+    activeReported = next
+    notify(onActiveChange, next)
+  }
+
   function restoreInteractivity() {
     for (const record of inertRecords) {
       if (!record.node?.isConnected) continue
@@ -135,9 +200,12 @@ export function createPrtsStartupSequence({
     }
     overlay?.remove?.()
     overlay = undefined
+    progressFill = undefined
+    progressPercent = undefined
     restoreInteractivity()
     if (restoreFocus && previousFocus?.isConnected) previousFocus.focus?.()
     previousFocus = undefined
+    reportActive(false)
   }
 
   function updateProgress(progress) {
@@ -145,9 +213,12 @@ export function createPrtsStartupSequence({
     const safeProgress = Math.max(0, Math.min(100, progress))
     if (Math.abs(safeProgress - lastProgress) < .01) return
     lastProgress = safeProgress
-    overlay.style.setProperty('--prts-startup-progress', (safeProgress / 100).toFixed(4))
-    const percent = overlay.querySelector('[data-prts-startup-percent]')
-    if (percent) percent.textContent = `${String(Math.round(safeProgress)).padStart(3, '0')}%`
+    if (progressFill) progressFill.style.transform = `scaleX(${(safeProgress / 100).toFixed(4)})`
+    const roundedProgress = Math.round(safeProgress)
+    if (progressPercent && roundedProgress !== lastRoundedProgress) {
+      lastRoundedProgress = roundedProgress
+      progressPercent.textContent = `${String(roundedProgress).padStart(3, '0')}%`
+    }
   }
 
   function applyStage(name) {
@@ -161,6 +232,10 @@ export function createPrtsStartupSequence({
     if (label) label.textContent = stage.label
     if (detail) detail.textContent = stage.detail
     overlay.setAttribute('aria-label', `P.R.T.S. 启动序列：${stage.detail}`)
+    if (name === 'ready' && !readyReported) {
+      readyReported = true
+      notify(onReady)
+    }
   }
 
   function requestStage(name, elapsed) {
@@ -218,7 +293,14 @@ export function createPrtsStartupSequence({
   }
 
   function promoteToTopLayer() {
-    if (typeof overlay?.showPopover !== 'function') return
+    if (!hostHasOpenTopLayer(document, overlay)) {
+      overlay?.removeAttribute('popover')
+      return
+    }
+    if (typeof overlay?.showPopover !== 'function') {
+      overlay?.removeAttribute('popover')
+      return
+    }
     try {
       overlay.showPopover()
     } catch {
@@ -266,7 +348,7 @@ export function createPrtsStartupSequence({
       updateProgress(90)
       if (elapsed - timeoutStartedAt >= schedule.timeoutHold) beginExit(elapsed, { failOpen: true })
     } else {
-      const approachProgress = 90 * easeOutCubic(elapsed / schedule.approach)
+      const approachProgress = approachProgressAt(elapsed, schedule.approach)
       let progress = Math.min(90, approachProgress)
 
       if (!hostReady && elapsed >= schedule.timeout) {
@@ -275,9 +357,14 @@ export function createPrtsStartupSequence({
         if (finishStartedAt === undefined) {
           finishStartedAt = elapsed
           finishStartedProgress = progress
+          finishStartedVelocity = approachVelocityAt(elapsed, schedule.approach)
         }
-        progress = finishStartedProgress
-          + (100 - finishStartedProgress) * easeOutCubic((elapsed - finishStartedAt) / schedule.finish)
+        progress = finishProgressAt(
+          finishStartedProgress,
+          finishStartedVelocity,
+          elapsed - finishStartedAt,
+          schedule.finish,
+        )
         if (elapsed - finishStartedAt >= schedule.finish) {
           progress = 100
           requestStage('ready', elapsed)
@@ -332,18 +419,24 @@ export function createPrtsStartupSequence({
     readyStartedAt = undefined
     exitStartedAt = undefined
     timeoutStartedAt = undefined
+    finishStartedVelocity = 0
     currentStage = 'boot'
     pendingStage = undefined
     copyTransitionStartedAt = undefined
     lastProgress = -1
+    activeReported = false
+    readyReported = false
     useReducedMotion = reducedMotionRequested(reduced)
 
     previousFocus = document.activeElement
+    lastRoundedProgress = -1
     document.body.appendChild(overlay)
+    progressFill = overlay.querySelector('[data-prts-startup-fill]')
+    progressPercent = overlay.querySelector('[data-prts-startup-percent]')
     promoteToTopLayer()
     document.documentElement.setAttribute('data-prts-startup-active', '')
     lockSiblings()
-    overlay.focus?.({ preventScroll: true })
+    reportActive(true)
     document.addEventListener('visibilitychange', onVisibilityChange)
 
     if (useReducedMotion) {

package/src/styles/stabilization.css

@@ -49,6 +49,40 @@ html[data-dsh-prts] [data-prts-nav-bottom] > button:is(:hover, :focus-visible) {
   color: #f3f6f7 !important;
 }
 
+html[data-dsh-prts] [data-prts-theme-disable]::after {
+  content: "";
+  position: absolute;
+  inset: 8px auto 8px 0;
+  width: 2px;
+  background: var(--prts-yellow);
+  transform: scaleY(0);
+  transition: transform 160ms var(--prts-ease-snap);
+}
+
+html[data-dsh-prts] [data-prts-theme-disable]:is(:hover, :focus-visible) {
+  color: var(--prts-yellow) !important;
+}
+
+html[data-dsh-prts] [data-prts-theme-disable]:is(:hover, :focus-visible)::after {
+  transform: scaleY(1);
+}
+
+html[data-dsh-prts] [data-prts-theme-disable-icon] {
+  width: 18px;
+  height: 18px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.7;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  transition: transform 120ms var(--prts-ease-snap), opacity 120ms ease;
+}
+
+html[data-dsh-prts] [data-prts-theme-disable]:active [data-prts-theme-disable-icon] {
+  opacity: .72;
+  transform: scale(.9);
+}
+
 html[data-dsh-prts] [data-prts-rail-brand][aria-expanded="true"]::after {
   content: "";
   position: absolute;

package/src/styles/startup-sequence.css

@@ -1,13 +1,12 @@
-/* P.R.T.S. startup overlay. Popover promotes it above host dialogs; z-index is the legacy fallback. */
+/* P.R.T.S. startup overlay. Fixed composition is the fast path; Popover is reserved for an active Host top layer. */
 html[data-dsh-prts] [data-prts-startup] {
   --prts-startup-bg: #07090b;
   --prts-startup-ink: #e8edef;
   --prts-startup-muted: #7d898f;
   --prts-startup-line: #394349;
   --prts-startup-accent: #f0c800;
-  --prts-startup-progress: 0;
   position: fixed;
-  z-index: 2147480000;
+  z-index: 2147483647;
   inset: 0;
   width: 100vw;
   max-width: none;
@@ -20,10 +19,10 @@ html[data-dsh-prts] [data-prts-startup] {
   overflow: hidden;
   isolation: isolate;
   box-sizing: border-box;
-  background: transparent;
+  background: var(--prts-startup-bg);
   color: var(--prts-startup-ink);
   font-family: var(--prts-body, sans-serif);
-  opacity: 0;
+  opacity: 1;
   outline: 0;
   pointer-events: auto;
   transition: opacity 120ms ease;
@@ -44,7 +43,9 @@ html[data-dsh-prts] [data-prts-startup]::after {
 html[data-dsh-prts] [data-prts-startup]::before { left: 0; }
 html[data-dsh-prts] [data-prts-startup]::after { right: 0; }
 
-html[data-dsh-prts] [data-prts-startup][data-visible] { opacity: 1; }
+html[data-dsh-prts] [data-prts-startup][data-exiting]:not([data-reduced-motion]) {
+  background: transparent;
+}
 
 html[data-dsh-prts] [data-prts-startup][data-exiting]::before {
   transform: translate3d(-101%, 0, 0);
@@ -347,6 +348,7 @@ html[data-dsh-prts] [data-prts-startup-track] {
 }
 
 html[data-dsh-prts] [data-prts-startup-fill] {
+  --prts-startup-progress: 0;
   position: absolute;
   top: -2px;
   right: 0;
@@ -356,6 +358,7 @@ html[data-dsh-prts] [data-prts-startup-fill] {
   transform: scaleX(var(--prts-startup-progress));
   transform-origin: left center;
   will-change: transform;
+  transition: transform 80ms linear;
 }
 
 html[data-dsh-prts] [data-prts-startup-ticks] {
@@ -407,6 +410,10 @@ html[data-dsh-prts] [data-prts-startup][data-reduced-motion] [data-prts-startup-
   transition: none;
 }
 
+html[data-dsh-prts] [data-prts-startup][data-reduced-motion] [data-prts-startup-fill] {
+  transition: none;
+}
+
 html[data-dsh-prts] [data-prts-startup][data-reduced-motion] [data-prts-startup-frame-outer] { transform: rotate(45deg); }
 html[data-dsh-prts] [data-prts-startup][data-reduced-motion] [data-prts-startup-frame-inner] { transform: rotate(-45deg); }