@a4anthony/proctorkit-vue 0.1.4 → 0.2.0

package/dist/style.css

@@ -125,6 +125,7 @@
     --ease-in: cubic-bezier(.4, 0, 1, 1);
     --ease-out: cubic-bezier(0, 0, .2, 1);
     --animate-spin: spin 1s linear infinite;
+    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
     --blur-sm: 8px;
     --aspect-video: 16 / 9;
     --default-transition-duration: .15s;
@@ -213,10 +214,18 @@
     inset-inline: calc(var(--spacing) * 0);
   }
 
+  :where(.pct-root).inset-x-4, :where(.pct-root) .inset-x-4 {
+    inset-inline: calc(var(--spacing) * 4);
+  }
+
   :where(.pct-root).inset-y-0, :where(.pct-root) .inset-y-0 {
     inset-block: calc(var(--spacing) * 0);
   }
 
+  :where(.pct-root).-top-0\.5, :where(.pct-root) .-top-0\.5 {
+    top: calc(var(--spacing) * -.5);
+  }
+
   :where(.pct-root).top-2, :where(.pct-root) .top-2 {
     top: calc(var(--spacing) * 2);
   }
@@ -225,10 +234,18 @@
     top: calc(var(--spacing) * 6);
   }
 
+  :where(.pct-root).top-12, :where(.pct-root) .top-12 {
+    top: calc(var(--spacing) * 12);
+  }
+
   :where(.pct-root).top-full, :where(.pct-root) .top-full {
     top: 100%;
   }
 
+  :where(.pct-root).-right-0\.5, :where(.pct-root) .-right-0\.5 {
+    right: calc(var(--spacing) * -.5);
+  }
+
   :where(.pct-root).right-0, :where(.pct-root) .right-0 {
     right: calc(var(--spacing) * 0);
   }
@@ -237,10 +254,18 @@
     right: calc(var(--spacing) * 2);
   }
 
+  :where(.pct-root).right-4, :where(.pct-root) .right-4 {
+    right: calc(var(--spacing) * 4);
+  }
+
   :where(.pct-root).right-7, :where(.pct-root) .right-7 {
     right: calc(var(--spacing) * 7);
   }
 
+  :where(.pct-root).-bottom-0\.5, :where(.pct-root) .-bottom-0\.5 {
+    bottom: calc(var(--spacing) * -.5);
+  }
+
   :where(.pct-root).-bottom-4, :where(.pct-root) .-bottom-4 {
     bottom: calc(var(--spacing) * -4);
   }
@@ -253,6 +278,14 @@
     bottom: calc(var(--spacing) * 3);
   }
 
+  :where(.pct-root).bottom-4, :where(.pct-root) .bottom-4 {
+    bottom: calc(var(--spacing) * 4);
+  }
+
+  :where(.pct-root).bottom-full, :where(.pct-root) .bottom-full {
+    bottom: 100%;
+  }
+
   :where(.pct-root).left-0, :where(.pct-root) .left-0 {
     left: calc(var(--spacing) * 0);
   }
@@ -261,6 +294,10 @@
     left: 11px;
   }
 
+  :where(.pct-root).isolate, :where(.pct-root) .isolate {
+    isolation: isolate;
+  }
+
   :where(.pct-root).z-0, :where(.pct-root) .z-0 {
     z-index: 0;
   }
@@ -339,6 +376,10 @@
     margin-inline: auto;
   }
 
+  :where(.pct-root).my-1\.5, :where(.pct-root) .my-1\.5 {
+    margin-block: calc(var(--spacing) * 1.5);
+  }
+
   :where(.pct-root).my-auto, :where(.pct-root) .my-auto {
     margin-block: auto;
   }
@@ -379,6 +420,10 @@
     margin-top: calc(var(--spacing) * 5);
   }
 
+  :where(.pct-root).mt-6, :where(.pct-root) .mt-6 {
+    margin-top: calc(var(--spacing) * 6);
+  }
+
   :where(.pct-root).mt-\[0\.45rem\], :where(.pct-root) .mt-\[0\.45rem\] {
     margin-top: .45rem;
   }
@@ -391,6 +436,10 @@
     margin-right: calc(var(--spacing) * -1);
   }
 
+  :where(.pct-root).mr-1, :where(.pct-root) .mr-1 {
+    margin-right: calc(var(--spacing) * 1);
+  }
+
   :where(.pct-root).-mb-4, :where(.pct-root) .-mb-4 {
     margin-bottom: calc(var(--spacing) * -4);
   }
@@ -419,6 +468,10 @@
     margin-bottom: calc(var(--spacing) * 4);
   }
 
+  :where(.pct-root).mb-5, :where(.pct-root) .mb-5 {
+    margin-bottom: calc(var(--spacing) * 5);
+  }
+
   :where(.pct-root).mb-6, :where(.pct-root) .mb-6 {
     margin-bottom: calc(var(--spacing) * 6);
   }
@@ -427,6 +480,10 @@
     margin-left: calc(var(--spacing) * .5);
   }
 
+  :where(.pct-root).ml-5, :where(.pct-root) .ml-5 {
+    margin-left: calc(var(--spacing) * 5);
+  }
+
   :where(.pct-root).ml-\[27px\], :where(.pct-root) .ml-\[27px\] {
     margin-left: 27px;
   }
@@ -489,6 +546,11 @@
     height: calc(var(--spacing) * 1.5);
   }
 
+  :where(.pct-root).size-2\.5, :where(.pct-root) .size-2\.5 {
+    width: calc(var(--spacing) * 2.5);
+    height: calc(var(--spacing) * 2.5);
+  }
+
   :where(.pct-root).size-3, :where(.pct-root) .size-3 {
     width: calc(var(--spacing) * 3);
     height: calc(var(--spacing) * 3);
@@ -559,6 +621,10 @@
     height: 100%;
   }
 
+  :where(.pct-root).h-1, :where(.pct-root) .h-1 {
+    height: calc(var(--spacing) * 1);
+  }
+
   :where(.pct-root).h-1\.5, :where(.pct-root) .h-1\.5 {
     height: calc(var(--spacing) * 1.5);
   }
@@ -571,6 +637,10 @@
     height: calc(var(--spacing) * 5);
   }
 
+  :where(.pct-root).h-6, :where(.pct-root) .h-6 {
+    height: calc(var(--spacing) * 6);
+  }
+
   :where(.pct-root).h-7, :where(.pct-root) .h-7 {
     height: calc(var(--spacing) * 7);
   }
@@ -607,6 +677,10 @@
     height: 72%;
   }
 
+  :where(.pct-root).h-\[284px\], :where(.pct-root) .h-\[284px\] {
+    height: 284px;
+  }
+
   :where(.pct-root).h-auto, :where(.pct-root) .h-auto {
     height: auto;
   }
@@ -655,6 +729,14 @@
     min-height: calc(var(--spacing) * 20);
   }
 
+  :where(.pct-root).min-h-48, :where(.pct-root) .min-h-48 {
+    min-height: calc(var(--spacing) * 48);
+  }
+
+  :where(.pct-root).min-h-\[2lh\], :where(.pct-root) .min-h-\[2lh\] {
+    min-height: 2lh;
+  }
+
   :where(.pct-root).min-h-\[20rem\], :where(.pct-root) .min-h-\[20rem\] {
     min-height: 20rem;
   }
@@ -683,10 +765,30 @@
     width: calc(var(--spacing) * 1);
   }
 
+  :where(.pct-root).w-1\/2, :where(.pct-root) .w-1\/2 {
+    width: 50%;
+  }
+
+  :where(.pct-root).w-2\/3, :where(.pct-root) .w-2\/3 {
+    width: 66.6667%;
+  }
+
+  :where(.pct-root).w-4\/5, :where(.pct-root) .w-4\/5 {
+    width: 80%;
+  }
+
+  :where(.pct-root).w-44, :where(.pct-root) .w-44 {
+    width: calc(var(--spacing) * 44);
+  }
+
   :where(.pct-root).w-64, :where(.pct-root) .w-64 {
     width: calc(var(--spacing) * 64);
   }
 
+  :where(.pct-root).w-72, :where(.pct-root) .w-72 {
+    width: calc(var(--spacing) * 72);
+  }
+
   :where(.pct-root).w-80, :where(.pct-root) .w-80 {
     width: calc(var(--spacing) * 80);
   }
@@ -743,10 +845,22 @@
     max-width: calc(var(--spacing) * 40);
   }
 
+  :where(.pct-root).max-w-\[18rem\], :where(.pct-root) .max-w-\[18rem\] {
+    max-width: 18rem;
+  }
+
   :where(.pct-root).max-w-\[55\%\], :where(.pct-root) .max-w-\[55\%\] {
     max-width: 55%;
   }
 
+  :where(.pct-root).max-w-\[calc\(100\%-1\.25rem\)\], :where(.pct-root) .max-w-\[calc\(100\%-1\.25rem\)\] {
+    max-width: calc(100% - 1.25rem);
+  }
+
+  :where(.pct-root).max-w-\[calc\(100vw-2rem\)\], :where(.pct-root) .max-w-\[calc\(100vw-2rem\)\] {
+    max-width: calc(100vw - 2rem);
+  }
+
   :where(.pct-root).max-w-\[min\(52vh\,24rem\)\],:where(.pct-root) .max-w-\[min\(52vh\,24rem\)\] {
     max-width: min(52vh, 24rem);
   }
@@ -817,11 +931,6 @@
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
-  :where(.pct-root).-translate-y-2, :where(.pct-root) .-translate-y-2 {
-    --tw-translate-y: calc(var(--spacing) * -2);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
-
   :where(.pct-root).-translate-y-px, :where(.pct-root) .-translate-y-px {
     --tw-translate-y: -1px;
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -863,6 +972,10 @@
     transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
   }
 
+  :where(.pct-root).animate-pulse, :where(.pct-root) .animate-pulse {
+    animation: var(--animate-pulse);
+  }
+
   :where(.pct-root).animate-spin, :where(.pct-root) .animate-spin {
     animation: var(--animate-spin);
   }
@@ -887,6 +1000,10 @@
     scroll-margin-top: calc(var(--spacing) * 4);
   }
 
+  :where(.pct-root).list-decimal, :where(.pct-root) .list-decimal {
+    list-style-type: decimal;
+  }
+
   :where(.pct-root).appearance-none, :where(.pct-root) .appearance-none {
     appearance: none;
   }
@@ -895,6 +1012,10 @@
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
+  :where(.pct-root).grid-cols-\[auto_1fr\], :where(.pct-root) .grid-cols-\[auto_1fr\] {
+    grid-template-columns: auto 1fr;
+  }
+
   :where(.pct-root).grid-rows-\[0fr\], :where(.pct-root) .grid-rows-\[0fr\] {
     grid-template-rows: 0fr;
   }
@@ -993,10 +1114,28 @@
     margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
   }
 
+  :where(.pct-root):where(.space-y-6 > :not(:last-child)), :where(.pct-root) :where(.space-y-6 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
+  }
+
+  :where(.pct-root).gap-x-4, :where(.pct-root) .gap-x-4 {
+    column-gap: calc(var(--spacing) * 4);
+  }
+
+  :where(.pct-root).gap-x-5, :where(.pct-root) .gap-x-5 {
+    column-gap: calc(var(--spacing) * 5);
+  }
+
   :where(.pct-root).gap-y-1\.5, :where(.pct-root) .gap-y-1\.5 {
     row-gap: calc(var(--spacing) * 1.5);
   }
 
+  :where(.pct-root).gap-y-2, :where(.pct-root) .gap-y-2 {
+    row-gap: calc(var(--spacing) * 2);
+  }
+
   :where(.pct-root):where(.divide-y > :not(:last-child)), :where(.pct-root) :where(.divide-y > :not(:last-child)) {
     --tw-divide-y-reverse: 0;
     border-bottom-style: var(--tw-border-style);
@@ -1009,6 +1148,10 @@
     border-color: var(--color-pct-line);
   }
 
+  :where(.pct-root).self-start, :where(.pct-root) .self-start {
+    align-self: flex-start;
+  }
+
   :where(.pct-root).truncate, :where(.pct-root) .truncate {
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -1088,6 +1231,10 @@
     border-style: dashed;
   }
 
+  :where(.pct-root).border-pct-brand, :where(.pct-root) .border-pct-brand {
+    border-color: var(--color-pct-brand);
+  }
+
   :where(.pct-root).border-pct-danger, :where(.pct-root) .border-pct-danger {
     border-color: var(--color-pct-danger);
   }
@@ -1258,6 +1405,16 @@
     background-color: var(--color-pct-warn-soft);
   }
 
+  :where(.pct-root).bg-pct-warn\/10, :where(.pct-root) .bg-pct-warn\/10 {
+    background-color: #f09c171a;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.pct-root).bg-pct-warn\/10, :where(.pct-root) .bg-pct-warn\/10 {
+      background-color: color-mix(in oklab, var(--color-pct-warn) 10%, transparent);
+    }
+  }
+
   :where(.pct-root).bg-white, :where(.pct-root) .bg-white {
     background-color: var(--color-white);
   }
@@ -1321,6 +1478,10 @@
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
 
+  :where(.pct-root).stroke-pct-line, :where(.pct-root) .stroke-pct-line {
+    stroke: var(--color-pct-line);
+  }
+
   :where(.pct-root).object-contain, :where(.pct-root) .object-contain {
     object-fit: contain;
   }
@@ -1473,10 +1634,18 @@
     padding-top: calc(var(--spacing) * 4);
   }
 
+  :where(.pct-root).pt-5, :where(.pct-root) .pt-5 {
+    padding-top: calc(var(--spacing) * 5);
+  }
+
   :where(.pct-root).pt-8, :where(.pct-root) .pt-8 {
     padding-top: calc(var(--spacing) * 8);
   }
 
+  :where(.pct-root).pr-1, :where(.pct-root) .pr-1 {
+    padding-right: calc(var(--spacing) * 1);
+  }
+
   :where(.pct-root).pr-8, :where(.pct-root) .pr-8 {
     padding-right: calc(var(--spacing) * 8);
   }
@@ -1509,6 +1678,10 @@
     padding-bottom: calc(var(--spacing) * 6);
   }
 
+  :where(.pct-root).pb-8, :where(.pct-root) .pb-8 {
+    padding-bottom: calc(var(--spacing) * 8);
+  }
+
   :where(.pct-root).pl-0, :where(.pct-root) .pl-0 {
     padding-left: calc(var(--spacing) * 0);
   }
@@ -1521,6 +1694,10 @@
     padding-left: calc(var(--spacing) * 2.5);
   }
 
+  :where(.pct-root).pl-4, :where(.pct-root) .pl-4 {
+    padding-left: calc(var(--spacing) * 4);
+  }
+
   :where(.pct-root).pl-\[26px\], :where(.pct-root) .pl-\[26px\] {
     padding-left: 26px;
   }
@@ -1671,14 +1848,30 @@
     letter-spacing: var(--tracking-wider);
   }
 
+  :where(.pct-root).break-words, :where(.pct-root) .break-words {
+    overflow-wrap: break-word;
+  }
+
   :where(.pct-root).whitespace-nowrap, :where(.pct-root) .whitespace-nowrap {
     white-space: nowrap;
   }
 
+  :where(.pct-root).text-\[oklch\(55\%_0\.15_155\)\], :where(.pct-root) .text-\[oklch\(55\%_0\.15_155\)\] {
+    color: oklch(55% .15 155);
+  }
+
+  :where(.pct-root).text-\[oklch\(62\%_0\.22_25\)\], :where(.pct-root) .text-\[oklch\(62\%_0\.22_25\)\] {
+    color: oklch(62% .22 25);
+  }
+
   :where(.pct-root).text-\[oklch\(64\%_0\.13_75\)\], :where(.pct-root) .text-\[oklch\(64\%_0\.13_75\)\] {
     color: oklch(64% .13 75);
   }
 
+  :where(.pct-root).text-\[oklch\(66\%_0\.15_70\)\], :where(.pct-root) .text-\[oklch\(66\%_0\.15_70\)\] {
+    color: oklch(66% .15 70);
+  }
+
   :where(.pct-root).text-pct-brand, :where(.pct-root) .text-pct-brand {
     color: var(--color-pct-brand);
   }
@@ -1746,6 +1939,10 @@
     font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
   }
 
+  :where(.pct-root).underline, :where(.pct-root) .underline {
+    text-decoration-line: underline;
+  }
+
   :where(.pct-root).underline-offset-2, :where(.pct-root) .underline-offset-2 {
     text-underline-offset: 2px;
   }
@@ -1791,10 +1988,19 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
+  :where(.pct-root).ring-2, :where(.pct-root) .ring-2 {
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
   :where(.pct-root).ring-pct-line, :where(.pct-root) .ring-pct-line {
     --tw-ring-color: var(--color-pct-line);
   }
 
+  :where(.pct-root).ring-pct-surface, :where(.pct-root) .ring-pct-surface {
+    --tw-ring-color: var(--color-pct-surface);
+  }
+
   :where(.pct-root).outline, :where(.pct-root) .outline {
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
@@ -1850,14 +2056,14 @@
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
 
-  :where(.pct-root).transition-\[width\], :where(.pct-root) .transition-\[width\] {
-    transition-property: width;
+  :where(.pct-root).transition-\[stroke-dashoffset\], :where(.pct-root) .transition-\[stroke-dashoffset\] {
+    transition-property: stroke-dashoffset;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
 
-  :where(.pct-root).transition-all, :where(.pct-root) .transition-all {
-    transition-property: all;
+  :where(.pct-root).transition-\[width\], :where(.pct-root) .transition-\[width\] {
+    transition-property: width;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
@@ -1990,6 +2196,10 @@
       color: var(--color-pct-ink-1);
     }
 
+    :where(.pct-root).hover\:text-pct-ink-2:hover, :where(.pct-root) .hover\:text-pct-ink-2:hover {
+      color: var(--color-pct-ink-2);
+    }
+
     :where(.pct-root).hover\:underline:hover, :where(.pct-root) .hover\:underline:hover {
       text-decoration-line: underline;
     }
@@ -2052,6 +2262,10 @@
     outline-style: none;
   }
 
+  :where(.pct-root).focus-visible\:bg-pct-surface-2:focus-visible, :where(.pct-root) .focus-visible\:bg-pct-surface-2:focus-visible {
+    background-color: var(--color-pct-surface-2);
+  }
+
   :where(.pct-root).focus-visible\:ring-2:focus-visible, :where(.pct-root) .focus-visible\:ring-2:focus-visible {
     --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2073,6 +2287,10 @@
     --tw-ring-color: var(--color-pct-ink-3);
   }
 
+  :where(.pct-root).focus-visible\:ring-pct-ink-5:focus-visible, :where(.pct-root) .focus-visible\:ring-pct-ink-5:focus-visible {
+    --tw-ring-color: var(--color-pct-ink-5);
+  }
+
   :where(.pct-root).focus-visible\:ring-pct-success:focus-visible, :where(.pct-root) .focus-visible\:ring-pct-success:focus-visible {
     --tw-ring-color: var(--color-pct-success);
   }
@@ -2149,11 +2367,25 @@
     opacity: .45;
   }
 
+  :where(.pct-root).disabled\:opacity-50:disabled, :where(.pct-root) .disabled\:opacity-50:disabled {
+    opacity: .5;
+  }
+
   :where(.pct-root).disabled\:opacity-60:disabled, :where(.pct-root) .disabled\:opacity-60:disabled {
     opacity: .6;
   }
 
+  @media (hover: hover) {
+    :where(.pct-root).disabled\:hover\:bg-transparent:disabled:hover, :where(.pct-root) .disabled\:hover\:bg-transparent:disabled:hover {
+      background-color: #0000;
+    }
+  }
+
   @media (prefers-reduced-motion: reduce) {
+    :where(.pct-root).motion-reduce\:animate-none, :where(.pct-root) .motion-reduce\:animate-none {
+      animation: none;
+    }
+
     :where(.pct-root).motion-reduce\:transition-none, :where(.pct-root) .motion-reduce\:transition-none {
       transition-property: none;
     }
@@ -2191,6 +2423,10 @@
     :where(.pct-root).sm\:px-8, :where(.pct-root) .sm\:px-8 {
       padding-inline: calc(var(--spacing) * 8);
     }
+
+    :where(.pct-root).sm\:pb-9, :where(.pct-root) .sm\:pb-9 {
+      padding-bottom: calc(var(--spacing) * 9);
+    }
   }
 
   @media (min-width: 48rem) {
@@ -2227,6 +2463,14 @@
     }
   }
 
+  :where(.pct-root).pct-dark\:text-pct-danger:where(.pct-dark, .pct-dark *), :where(.pct-root) .pct-dark\:text-pct-danger:where(.pct-dark, .pct-dark *) {
+    color: var(--color-pct-danger);
+  }
+
+  :where(.pct-root).pct-dark\:text-pct-success:where(.pct-dark, .pct-dark *), :where(.pct-root) .pct-dark\:text-pct-success:where(.pct-dark, .pct-dark *) {
+    color: var(--color-pct-success);
+  }
+
   :where(.pct-root).pct-dark\:text-pct-warn:where(.pct-dark, .pct-dark *), :where(.pct-root) .pct-dark\:text-pct-warn:where(.pct-dark, .pct-dark *) {
     color: var(--color-pct-warn);
   }
@@ -2300,11 +2544,120 @@
   }
 }
 
+@keyframes pulse {
+  50% {
+    opacity: .5;
+  }
+}
+
+:where(.pct-root).pct-browser-location-pulse[data-v-ddce2520], :where(.pct-root) .pct-browser-location-pulse[data-v-ddce2520] {
+  transform-box: fill-box;
+  transform-origin: center;
+  opacity: 0;
+  animation: pct-browser-location-pulse-ddce2520 1.2s ease-out 2;
+}
+@keyframes pct-browser-location-pulse-ddce2520 {
+from {
+    opacity: 0.7;
+    transform: scale(1);
+}
+to {
+    opacity: 0;
+    transform: scale(1.22);
+}
+}
+@media (prefers-reduced-motion: reduce) {
+:where(.pct-root).pct-browser-location-pulse[data-v-ddce2520], :where(.pct-root) .pct-browser-location-pulse[data-v-ddce2520] {
+    animation: none;
+}
+}
+
+:where(.pct-root).pct-display-guide-site-icon[data-v-be397d2e],
+:where(.pct-root) .pct-display-guide-site-icon[data-v-be397d2e],
+:where(.pct-root).pct-display-guide-permission-row[data-v-be397d2e],
+:where(.pct-root) .pct-display-guide-permission-row[data-v-be397d2e] {
+  transition: box-shadow 0.25s;
+}
+:where(.pct-root).pct-display-guide[data-phase="0"] .pct-display-guide-site-icon[data-v-be397d2e],
+:where(.pct-root) .pct-display-guide[data-phase="0"] .pct-display-guide-site-icon[data-v-be397d2e],
+:where(.pct-root).pct-display-guide[data-phase="1"] .pct-display-guide-permission-row[data-v-be397d2e],
+:where(.pct-root) .pct-display-guide[data-phase="1"] .pct-display-guide-permission-row[data-v-be397d2e],
+:where(.pct-root).pct-display-guide[data-phase="3"] .pct-display-guide-retry[data-v-be397d2e],
+:where(.pct-root) .pct-display-guide[data-phase="3"] .pct-display-guide-retry[data-v-be397d2e] {
+  box-shadow:
+    0 0 0 2px var(--color-pct-brand),
+    0 0 0 5px var(--color-pct-brand-soft);
+}
+:where(.pct-root).pct-display-guide-toggle[data-v-be397d2e], :where(.pct-root) .pct-display-guide-toggle[data-v-be397d2e] {
+  position: relative;
+  width: 28px;
+  height: 16px;
+  border: 1px solid var(--color-pct-ink-4);
+  border-radius: 16px;
+  background: var(--color-pct-ink-3);
+  transition:
+    background 0.3s,
+    box-shadow 0.3s;
+}
+:where(.pct-root).pct-display-guide-toggle[data-v-be397d2e]::after, :where(.pct-root) .pct-display-guide-toggle[data-v-be397d2e]::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--color-pct-surface);
+  transition: transform 0.35s;
+}
+:where(.pct-root).pct-display-guide[data-phase="2"] .pct-display-guide-toggle[data-v-be397d2e], :where(.pct-root) .pct-display-guide[data-phase="2"] .pct-display-guide-toggle[data-v-be397d2e] {
+  background: var(--color-pct-brand);
+  box-shadow: 0 0 0 4px var(--color-pct-brand-soft);
+}
+:where(.pct-root).pct-display-guide[data-phase="2"] .pct-display-guide-toggle[data-v-be397d2e]::after, :where(.pct-root) .pct-display-guide[data-phase="2"] .pct-display-guide-toggle[data-v-be397d2e]::after {
+  transform: translateX(12px);
+}
+:where(.pct-root).pct-display-guide-pointer[data-v-be397d2e], :where(.pct-root) .pct-display-guide-pointer[data-v-be397d2e] {
+  pointer-events: none;
+  left: 52px;
+  top: 18px;
+  transition:
+    left 0.6s,
+    top 0.6s;
+}
+:where(.pct-root).pct-display-guide[data-phase="1"] .pct-display-guide-pointer[data-v-be397d2e],
+:where(.pct-root) .pct-display-guide[data-phase="1"] .pct-display-guide-pointer[data-v-be397d2e],
+:where(.pct-root).pct-display-guide[data-phase="2"] .pct-display-guide-pointer[data-v-be397d2e],
+:where(.pct-root) .pct-display-guide[data-phase="2"] .pct-display-guide-pointer[data-v-be397d2e] {
+  left: calc(100% - 49px);
+  top: 140px;
+}
+:where(.pct-root).pct-display-guide[data-phase="3"] .pct-display-guide-pointer[data-v-be397d2e], :where(.pct-root) .pct-display-guide[data-phase="3"] .pct-display-guide-pointer[data-v-be397d2e] {
+  left: calc(100% - 44px);
+  top: 254px;
+}
+:where(.pct-root).pct-display-guide[data-paused="true"] .pct-display-guide-pointer[data-v-be397d2e],
+:where(.pct-root) .pct-display-guide[data-paused="true"] .pct-display-guide-pointer[data-v-be397d2e],
+:where(.pct-root).pct-display-guide[data-paused="true"] .pct-display-guide-toggle[data-v-be397d2e],
+:where(.pct-root) .pct-display-guide[data-paused="true"] .pct-display-guide-toggle[data-v-be397d2e],
+:where(.pct-root).pct-display-guide[data-paused="true"] .pct-display-guide-toggle[data-v-be397d2e]::after,
+:where(.pct-root) .pct-display-guide[data-paused="true"] .pct-display-guide-toggle[data-v-be397d2e]::after {
+  transition: none;
+}
+@media (prefers-reduced-motion: reduce) {
+:where(.pct-root).pct-display-guide[data-v-be397d2e] *,
+  :where(.pct-root) .pct-display-guide[data-v-be397d2e] *,
+  :where(.pct-root).pct-display-guide[data-v-be397d2e] *::after,
+  :where(.pct-root) .pct-display-guide[data-v-be397d2e] *::after {
+    transition: none;
+}
+}
+
 /* Brief scale-in on each countdown tick (re-keyed per number). */
-:where(.pct-root).pct-countdown[data-v-b93995bd], :where(.pct-root) .pct-countdown[data-v-b93995bd] {
-  animation: pct-countdown-pop-b93995bd 1s ease-out;
+:where(.pct-root).pct-countdown[data-v-ff72b60a], :where(.pct-root) .pct-countdown[data-v-ff72b60a] {
+  animation: pct-countdown-pop-ff72b60a 1s ease-out;
 }
-@keyframes pct-countdown-pop-b93995bd {
+@keyframes pct-countdown-pop-ff72b60a {
 0% {
     opacity: 0;
     transform: scale(1.6);
@@ -2315,7 +2668,7 @@
 }
 }
 @media (prefers-reduced-motion: reduce) {
-:where(.pct-root).pct-countdown[data-v-b93995bd], :where(.pct-root) .pct-countdown[data-v-b93995bd] {
+:where(.pct-root).pct-countdown[data-v-ff72b60a], :where(.pct-root) .pct-countdown[data-v-ff72b60a] {
     animation: none;
 }
 }
@@ -2331,7 +2684,7 @@
  * AudioPlayer / VideoRecorder) keep their own `max-w-*` so they stay compact
  * rather than stretching the full card width.
  */
-.demo-written[data-v-05c519e0] .pct-root {
+.demo-written[data-v-97ef10ac] .pct-root {
   max-width: none;
   margin-inline: 0;
 }