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

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/client/theme-controller-v2.js

@@ -7,6 +7,7 @@ const ROOT_ATTRIBUTES = [
   'data-prts-glass',
   'data-prts-motion',
   'data-prts-particle-pattern',
+  'data-prts-session-flow',
   'data-prts-conversation-style',
 ]
 
@@ -716,6 +717,7 @@ export function createThemeController({ document, window, cssText, service, onTr
       root.dataset.prtsGlass = preferences.glass
       root.dataset.prtsMotion = preferences.motion
       root.dataset.prtsParticlePattern = 'orthogonal'
+      root.dataset.prtsSessionFlow = preferences.sessionFlow ? 'on' : 'off'
       root.dataset.prtsConversationStyle = preferences.conversationStyle
       refresh()
     },

package/src/client/theme-controller.js

@@ -7,6 +7,7 @@ const ROOT_ATTRIBUTES = [
   'data-prts-glass',
   'data-prts-motion',
   'data-prts-particle-pattern',
+  'data-prts-session-flow',
   'data-prts-conversation-style',
 ]
 
@@ -109,6 +110,7 @@ export function createThemeController({ document, window, cssText, service }) {
       root.dataset.prtsGlass = preferences.glass
       root.dataset.prtsMotion = preferences.motion
       root.dataset.prtsParticlePattern = 'orthogonal'
+      root.dataset.prtsSessionFlow = preferences.sessionFlow ? 'on' : 'off'
       root.dataset.prtsConversationStyle = preferences.conversationStyle
       refresh()
     },

package/src/client/theme-settings-workbench.js

@@ -19,6 +19,7 @@ const COMMON_CONTROLS = [
   ['texture', '环境底纹', [['off', '关闭'], ['restrained', '克制'], ['full', '完整']]],
   ['glass', '玻璃材质', [['off', '关闭'], ['soft', '柔和'], ['standard', '标准'], ['clear', '清晰']]],
   ['motion', '动态效果', [['system', '跟随系统'], ['reduced', '减少']]],
+  ['sessionFlow', '当前会话流线', [['false', '关闭'], ['true', '开启']]],
   ['conversationStyle', '会话主题', [['native', '原有'], ['deck-chat', '通讯链路']]],
 ]
 
@@ -37,6 +38,8 @@ function settingButtons(key, label, options) {
         ? '<small data-prts-setting-note>在任意窗口宽度下默认收起 P.R.T.S. 导航，可从左侧按钮临时展开</small>'
       : key === 'conversationStyle'
         ? '<small data-prts-setting-note>立即切换会话背景、头像与消息气泡</small>'
+      : key === 'sessionFlow'
+        ? '<small data-prts-setting-note>仅控制当前会话卡片的三色流线</small>'
       : ''
   const sample = value => key === 'texture' || key === 'glass'
     ? `<i data-prts-option-sample="${key}" data-prts-option-sample-value="${value}" aria-hidden="true"></i>`
@@ -281,7 +284,11 @@ export function createThemeSettingsOverlay({
     const particleDetail = resolveParticleDetail(currentPreferences)
     for (const button of panel.querySelectorAll('button[data-prts-setting-key]')) {
       const key = button.dataset.prtsSettingKey
-      const actual = key === 'particleDetail' ? particleDetail : currentPreferences[key]
+      const actual = key === 'particleDetail'
+        ? particleDetail
+        : key === 'sessionFlow'
+          ? currentPreferences.sessionFlow !== false
+          : currentPreferences[key]
       const selected = String(actual) === button.dataset.prtsSettingValue
       button.classList.toggle('is-selected', selected)
       button.setAttribute('aria-pressed', String(selected))

package/src/styles/facility-vector.css

@@ -141,6 +141,71 @@ html[data-dsh-prts] [data-prts-session-pickup] {
   pointer-events: none;
 }
 
+html[data-dsh-prts] [data-prts-session-lifeline] {
+  --prts-lifeline-pink: #f7ddeb;
+  --prts-lifeline-green: #65ddb0;
+  --prts-lifeline-blue: #6eb7f3;
+  opacity: 0;
+  transition: opacity 160ms ease;
+  pointer-events: none;
+}
+
+html[data-dsh-prts][data-prts-scheme="light"] [data-prts-session-lifeline] {
+  --prts-lifeline-pink: #c36f99;
+  --prts-lifeline-green: #218d6b;
+  --prts-lifeline-blue: #357ebc;
+}
+
+html[data-dsh-prts] [data-prts-session-lifeline-filament] {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: .8;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  vector-effect: non-scaling-stroke;
+  shape-rendering: geometricPrecision;
+}
+
+html[data-dsh-prts] [data-prts-session-lifeline-filament="back"] {
+  stroke: var(--prts-lifeline-pink);
+  opacity: .74;
+  stroke-width: .85;
+}
+
+html[data-dsh-prts] [data-prts-session-lifeline-filament="core"] {
+  stroke: var(--prts-lifeline-green);
+  opacity: .68;
+  stroke-width: .9;
+}
+
+html[data-dsh-prts] [data-prts-session-lifeline-filament="front"] {
+  stroke: var(--prts-lifeline-blue);
+  opacity: .74;
+  stroke-width: .85;
+}
+
+html[data-dsh-prts] [data-prts-session-row][aria-selected="true"] [data-prts-session-lifeline] {
+  opacity: .62;
+}
+
+html[data-dsh-prts] [data-prts-session-row][aria-selected="true"]:hover [data-prts-session-lifeline] {
+  opacity: 0;
+}
+
+html[data-dsh-prts][data-prts-session-flow="off"] [data-prts-session-row] [data-prts-session-lifeline] {
+  opacity: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html[data-dsh-prts] [data-prts-session-lifeline] {
+    transition-duration: 0s;
+  }
+}
+
+html[data-dsh-prts][data-prts-motion="reduced"] [data-prts-session-lifeline] {
+  transition-duration: 0s;
+}
+
 html[data-dsh-prts] [data-prts-session-row]:hover [data-prts-facility-texture="pickup"] [data-prts-session-pickup] {
   opacity: .58;
   transform: translate3d(0, 0, 0);

package/src/styles/prts.css

@@ -809,7 +809,6 @@ html[data-dsh-prts] [data-prts-region="operation"] {
 html[data-dsh-prts] [data-prts-region="sessions"] {
   box-sizing: border-box;
   position: relative;
-  z-index: 4;
   overflow: hidden;
   border-right: 1px solid var(--prts-line);
   background: var(--prts-panel);
@@ -818,7 +817,6 @@ html[data-dsh-prts] [data-prts-region="sessions"] {
 
 html[data-dsh-prts] [data-prts-region="operation"] {
   position: relative;
-  z-index: 1;
   overflow: hidden;
   background: var(--prts-canvas);
   color: var(--prts-ink);
@@ -987,6 +985,14 @@ html[data-dsh-prts] [data-prts-session-row] [data-prts-row-title]::before {
   letter-spacing: .08em;
 }
 
+html[data-dsh-prts] [data-prts-session-row][aria-selected="true"] [data-prts-row-title] {
+  font-weight: 700;
+}
+
+html[data-dsh-prts] [data-prts-session-row][aria-selected="true"] [data-prts-row-title]::before {
+  color: var(--prts-yellow);
+}
+
 html[data-dsh-prts] [data-prts-workspace-actions],
 html[data-dsh-prts] [data-prts-session-actions] {
   position: absolute;
@@ -1516,7 +1522,7 @@ html[data-dsh-prts] [data-prts-composer-fallback] :is(textarea, [data-composer-i
   caret-color: var(--prts-yellow);
 }
 
-html[data-dsh-prts] [data-composer-card] button:not([data-slot="conversation.input.attachments"] *),
+html[data-dsh-prts] [data-composer-card] button:not([data-slot="conversation.input.attachments"] *):not([data-prts-glass-menu] *):not([data-prts-floating-glass] *):not([role="menu"] *):not([role="listbox"] *),
 html[data-dsh-prts] [data-prts-conversation-control] {
   border: 1px solid var(--prts-line) !important;
   border-radius: var(--prts-radius-control) !important;
@@ -1526,7 +1532,7 @@ html[data-dsh-prts] [data-prts-conversation-control] {
 }
 
 
-html[data-dsh-prts] [data-composer-card] button:not([data-slot="conversation.input.attachments"] *):is(:hover, :focus-visible),
+html[data-dsh-prts] [data-composer-card] button:not([data-slot="conversation.input.attachments"] *):not([data-prts-glass-menu] *):not([data-prts-floating-glass] *):not([role="menu"] *):not([role="listbox"] *):is(:hover, :focus-visible),
 html[data-dsh-prts] [data-prts-conversation-control]:is(:hover, :focus-visible) {
   border-color: var(--prts-yellow) !important;
 }
@@ -1537,7 +1543,7 @@ html[data-dsh-prts] [data-composer-card] button[type="submit"] {
   color: var(--prts-yellow-ink) !important;
 }
 
-html[data-dsh-prts] [data-composer-card] button:not([data-slot="conversation.input.attachments"] *):active,
+html[data-dsh-prts] [data-composer-card] button:not([data-slot="conversation.input.attachments"] *):not([data-prts-glass-menu] *):not([data-prts-floating-glass] *):not([role="menu"] *):not([role="listbox"] *):active,
 html[data-dsh-prts] [data-prts-conversation-control]:active {
   transform: translateY(1px) scale(.98);
 }

package/src/styles/refinement.css

@@ -11,7 +11,6 @@ html[data-dsh-prts] [data-prts-region="frame"] {
 
 html[data-dsh-prts] [data-prts-region="frame"] > [data-shell-overlay] {
   position: absolute !important;
-  z-index: 120;
   inset: 0;
   min-width: 0;
   min-height: 0;
@@ -155,6 +154,10 @@ html[data-dsh-prts] [data-prts-session-row]:hover [data-prts-session-time] {
   opacity: 0;
 }
 
+html[data-dsh-prts] [data-prts-session-row][aria-selected="true"] [data-prts-session-time] {
+  opacity: 0;
+}
+
 /* Restore the notched P.R.T.S. composer with one complete layered contour. */
 html[data-dsh-prts] [data-composer-card],
 html[data-dsh-prts] [data-prts-composer-fallback] {
@@ -417,7 +420,7 @@ html[data-dsh-prts] [data-prts-hero-active] [data-prts-composer-fallback] textar
   resize: vertical;
 }
 
-html[data-dsh-prts] [data-prts-hero-active] [data-composer-card] button:not([data-slot="conversation.input.attachments"] *),
+html[data-dsh-prts] [data-prts-hero-active] [data-composer-card] button:not([data-slot="conversation.input.attachments"] *):not([data-prts-glass-menu] *):not([data-prts-floating-glass] *):not([role="menu"] *):not([role="listbox"] *),
 html[data-dsh-prts] [data-prts-hero-active] [data-prts-glass-control] {
   min-height: 36px;
 }

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;
@@ -103,7 +137,7 @@ html[data-dsh-prts] [data-prts-nav-bottom] b {
 /* Complete structural outlines; decorative accents are separate edges. */
 html[data-dsh-prts] [data-composer-card],
 html[data-dsh-prts] [data-prts-composer-fallback],
-html[data-dsh-prts] [data-composer-card] button:not([data-slot="conversation.input.attachments"] *),
+html[data-dsh-prts] [data-composer-card] button:not([data-slot="conversation.input.attachments"] *):not([data-prts-glass-menu] *):not([data-prts-floating-glass] *):not([role="menu"] *):not([role="listbox"] *),
 html[data-dsh-prts] [data-prts-conversation-control],
 html[data-dsh-prts] [data-produced-files-row] > button[type="button"],
 html[data-dsh-prts] [data-prts-to-bottom] {

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); }