create-next-imagicma 0.0.4 → 0.0.6

package/template-hono/client/src/globals.css

@@ -0,0 +1,767 @@
+@import "tailwindcss";
+@config "../../tailwind.config.mjs";
+
+:root {
+  /* Fonts */
+  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
+    "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", sans-serif;
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    "Liberation Mono", "Courier New", monospace;
+
+  /* Core theme tokens (HSL triples) */
+  --background: 0 0% 100%;
+  --foreground: 240 10% 3.9%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 240 10% 3.9%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 10% 3.9%;
+
+  --primary: 240 5.9% 10%;
+  --primary-foreground: 0 0% 98%;
+
+  --secondary: 240 4.8% 95.9%;
+  --secondary-foreground: 240 5.9% 10%;
+
+  --muted: 240 4.8% 95.9%;
+  --muted-foreground: 240 3.8% 46.1%;
+
+  --accent: 240 4.8% 95.9%;
+  --accent-foreground: 240 5.9% 10%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+
+  --border: 240 5.9% 90%;
+  --input: 240 5.9% 90%;
+  --ring: 240 5.9% 10%;
+
+  --radius: 0.5rem;
+
+  /* Extra tokens used by the migrated shadcn components */
+  --card-border: var(--border);
+  --popover-border: var(--border);
+  --sidebar: var(--background);
+  --sidebar-foreground: var(--foreground);
+  --sidebar-border: var(--border);
+  --sidebar-ring: var(--ring);
+
+  --chart-1: 220 70% 50%;
+  --chart-2: 160 60% 45%;
+  --chart-3: 30 80% 55%;
+  --chart-4: 280 65% 60%;
+  --chart-5: 340 75% 55%;
+
+  /* Border colors expected by template classnames */
+  --primary-border: hsl(var(--primary) / 0.18);
+  --secondary-border: hsl(var(--border));
+  --muted-border: hsl(var(--border));
+  --accent-border: hsl(var(--border));
+  --destructive-border: hsl(var(--destructive) / 0.25);
+
+  --button-outline: hsl(var(--border));
+  --badge-outline: hsl(var(--border));
+}
+
+.dark {
+  --background: 240 10% 3.9%;
+  --foreground: 0 0% 98%;
+
+  --card: 240 10% 3.9%;
+  --card-foreground: 0 0% 98%;
+
+  --popover: 240 10% 3.9%;
+  --popover-foreground: 0 0% 98%;
+
+  --primary: 0 0% 98%;
+  --primary-foreground: 240 5.9% 10%;
+
+  --secondary: 240 3.7% 15.9%;
+  --secondary-foreground: 0 0% 98%;
+
+  --muted: 240 3.7% 15.9%;
+  --muted-foreground: 240 5% 64.9%;
+
+  --accent: 240 3.7% 15.9%;
+  --accent-foreground: 0 0% 98%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 0 0% 98%;
+
+  --border: 240 3.7% 15.9%;
+  --input: 240 3.7% 15.9%;
+  --ring: 240 4.9% 83.9%;
+
+  --card-border: var(--border);
+  --popover-border: var(--border);
+  --sidebar: var(--background);
+  --sidebar-foreground: var(--foreground);
+  --sidebar-border: var(--border);
+  --sidebar-ring: var(--ring);
+
+  --primary-border: hsl(var(--primary) / 0.15);
+  --secondary-border: hsl(var(--border));
+  --muted-border: hsl(var(--border));
+  --accent-border: hsl(var(--border));
+  --destructive-border: hsl(var(--destructive) / 0.35);
+
+  --button-outline: hsl(var(--border));
+  --badge-outline: hsl(var(--border));
+}
+
+/* Theme style presets (used by html[data-theme-style="<preset>"]) */
+:root[data-theme-style="quadratic"] {
+  --background: 240 8.3% 95.3%;
+  --foreground: 225 14.3% 5.5%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 225 14.3% 5.5%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 225 14.3% 5.5%;
+
+  --primary: 240 8.6% 93.1%;
+  --primary-foreground: 225 14.3% 5.5%;
+  --secondary: 240 7% 86.1%;
+  --secondary-foreground: 225 14.3% 5.5%;
+  --muted: 240 8.6% 93.1%;
+  --muted-foreground: 225 7% 35%;
+  --accent: 240 7% 86.1%;
+  --accent-foreground: 225 14.3% 5.5%;
+
+  --border: 240 7% 82%;
+  --input: 240 7% 82%;
+  --ring: 225 14.3% 5.5%;
+
+  --chart-1: 225 14.3% 35%;
+  --chart-2: 240 8% 55%;
+  --chart-3: 220 40% 55%;
+  --chart-4: 270 20% 62%;
+  --chart-5: 190 30% 52%;
+}
+
+.dark[data-theme-style="quadratic"] {
+  --background: 225 14.3% 5.5%;
+  --foreground: 240 8.3% 95.3%;
+
+  --card: 225 12% 9%;
+  --card-foreground: 240 8.3% 95.3%;
+  --popover: 225 12% 9%;
+  --popover-foreground: 240 8.3% 95.3%;
+
+  --primary: 240 8.6% 93.1%;
+  --primary-foreground: 225 14.3% 5.5%;
+  --secondary: 225 8% 15%;
+  --secondary-foreground: 240 8.3% 95.3%;
+  --muted: 225 8% 12%;
+  --muted-foreground: 240 7% 70%;
+  --accent: 225 8% 12%;
+  --accent-foreground: 240 8.3% 95.3%;
+
+  --border: 225 8% 22%;
+  --input: 225 8% 22%;
+  --ring: 240 8.6% 93.1%;
+
+  --chart-1: 240 8.6% 70%;
+  --chart-2: 220 30% 65%;
+  --chart-3: 190 30% 60%;
+  --chart-4: 270 20% 65%;
+  --chart-5: 45 20% 62%;
+}
+
+:root[data-theme-style="nomad"] {
+  --background: 240 9.1% 95.7%;
+  --foreground: 220 12.5% 9.4%;
+
+  --card: 240 12% 98%;
+  --card-foreground: 220 12.5% 9.4%;
+  --popover: 240 12% 98%;
+  --popover-foreground: 220 12.5% 9.4%;
+
+  --primary: 339 89.8% 53.9%;
+  --primary-foreground: 220 12.5% 9.4%;
+  --secondary: 231 10.4% 86.9%;
+  --secondary-foreground: 220 12.5% 9.4%;
+  --muted: 240 9% 92%;
+  --muted-foreground: 220 8% 35%;
+  --accent: 231 10.4% 86.9%;
+  --accent-foreground: 220 12.5% 9.4%;
+
+  --border: 231 10% 82%;
+  --input: 231 10% 82%;
+  --ring: 339 89.8% 53.9%;
+
+  --chart-1: 339 89.8% 53.9%;
+  --chart-2: 220 28% 40%;
+  --chart-3: 40 72% 60%;
+  --chart-4: 173 25% 45%;
+  --chart-5: 280 45% 60%;
+}
+
+.dark[data-theme-style="nomad"] {
+  --background: 220 12.5% 9.4%;
+  --foreground: 240 9.1% 95.7%;
+
+  --card: 220 12% 12%;
+  --card-foreground: 240 9.1% 95.7%;
+  --popover: 220 12% 12%;
+  --popover-foreground: 240 9.1% 95.7%;
+
+  --primary: 339 90% 62%;
+  --primary-foreground: 220 12.5% 9.4%;
+  --secondary: 220 10% 17%;
+  --secondary-foreground: 240 9.1% 95.7%;
+  --muted: 220 9% 14%;
+  --muted-foreground: 240 7% 70%;
+  --accent: 220 9% 14%;
+  --accent-foreground: 240 9.1% 95.7%;
+
+  --border: 220 8% 22%;
+  --input: 220 8% 22%;
+  --ring: 339 90% 62%;
+
+  --chart-1: 339 90% 66%;
+  --chart-2: 40 72% 65%;
+  --chart-3: 173 30% 58%;
+  --chart-4: 280 50% 72%;
+  --chart-5: 220 18% 72%;
+}
+
+:root[data-theme-style="honey"] {
+  --background: 49 38.1% 91.8%;
+  --foreground: 40 52.9% 27.5%;
+
+  --card: 49 42% 95%;
+  --card-foreground: 40 52.9% 27.5%;
+  --popover: 49 42% 95%;
+  --popover-foreground: 40 52.9% 27.5%;
+
+  --primary: 40 72.8% 68.2%;
+  --primary-foreground: 40 52.9% 18%;
+  --secondary: 63 20.8% 79.2%;
+  --secondary-foreground: 40 52.9% 27.5%;
+  --muted: 49 30% 88%;
+  --muted-foreground: 40 24% 38%;
+  --accent: 63 20.8% 79.2%;
+  --accent-foreground: 40 52.9% 27.5%;
+
+  --border: 52 22% 74%;
+  --input: 52 22% 74%;
+  --ring: 40 72.8% 68.2%;
+
+  --chart-1: 40 72.8% 55%;
+  --chart-2: 63 30% 45%;
+  --chart-3: 173 25% 42%;
+  --chart-4: 18 56% 50%;
+  --chart-5: 240 16% 52%;
+}
+
+.dark[data-theme-style="honey"] {
+  --background: 36 38% 10%;
+  --foreground: 49 30% 88%;
+
+  --card: 34 30% 14%;
+  --card-foreground: 49 30% 88%;
+  --popover: 34 30% 14%;
+  --popover-foreground: 49 30% 88%;
+
+  --primary: 40 72.8% 68.2%;
+  --primary-foreground: 36 38% 10%;
+  --secondary: 38 20% 20%;
+  --secondary-foreground: 49 30% 88%;
+  --muted: 38 18% 18%;
+  --muted-foreground: 49 18% 70%;
+  --accent: 38 18% 18%;
+  --accent-foreground: 49 30% 88%;
+
+  --border: 38 18% 26%;
+  --input: 38 18% 26%;
+  --ring: 40 72.8% 68.2%;
+
+  --chart-1: 40 72.8% 68.2%;
+  --chart-2: 63 35% 58%;
+  --chart-3: 173 30% 56%;
+  --chart-4: 20 56% 64%;
+  --chart-5: 240 22% 70%;
+}
+
+:root[data-theme-style="zen-garden"] {
+  --background: 84 9.8% 90%;
+  --foreground: 225 18.2% 8.6%;
+
+  --card: 84 12% 94%;
+  --card-foreground: 225 18.2% 8.6%;
+  --popover: 84 12% 94%;
+  --popover-foreground: 225 18.2% 8.6%;
+
+  --primary: 173 24.7% 62%;
+  --primary-foreground: 225 18.2% 8.6%;
+  --secondary: 289 32.9% 72%;
+  --secondary-foreground: 225 18.2% 8.6%;
+  --muted: 84 10% 86%;
+  --muted-foreground: 225 10% 36%;
+  --accent: 289 32.9% 72%;
+  --accent-foreground: 225 18.2% 8.6%;
+
+  --border: 84 8% 78%;
+  --input: 84 8% 78%;
+  --ring: 173 24.7% 62%;
+
+  --chart-1: 173 24.7% 48%;
+  --chart-2: 289 32.9% 58%;
+  --chart-3: 40 68% 56%;
+  --chart-4: 220 26% 50%;
+  --chart-5: 0 55% 58%;
+}
+
+.dark[data-theme-style="zen-garden"] {
+  --background: 225 18.2% 8.6%;
+  --foreground: 84 9.8% 90%;
+
+  --card: 225 16% 12%;
+  --card-foreground: 84 9.8% 90%;
+  --popover: 225 16% 12%;
+  --popover-foreground: 84 9.8% 90%;
+
+  --primary: 173 30% 66%;
+  --primary-foreground: 225 18.2% 8.6%;
+  --secondary: 225 12% 18%;
+  --secondary-foreground: 84 9.8% 90%;
+  --muted: 225 10% 15%;
+  --muted-foreground: 84 8% 72%;
+  --accent: 225 10% 15%;
+  --accent-foreground: 84 9.8% 90%;
+
+  --border: 225 10% 24%;
+  --input: 225 10% 24%;
+  --ring: 173 30% 66%;
+
+  --chart-1: 173 30% 66%;
+  --chart-2: 289 36% 70%;
+  --chart-3: 40 68% 64%;
+  --chart-4: 220 30% 70%;
+  --chart-5: 355 65% 68%;
+}
+
+:root[data-theme-style="highlighter"] {
+  --background: 228 23.8% 95.9%;
+  --foreground: 223 18.9% 7.3%;
+
+  --card: 228 24% 98%;
+  --card-foreground: 223 18.9% 7.3%;
+  --popover: 228 24% 98%;
+  --popover-foreground: 223 18.9% 7.3%;
+
+  --primary: 97 70.5% 64.1%;
+  --primary-foreground: 223 18.9% 7.3%;
+  --secondary: 249 35.6% 88.4%;
+  --secondary-foreground: 223 18.9% 7.3%;
+  --muted: 228 20% 92%;
+  --muted-foreground: 223 10% 35%;
+  --accent: 249 35.6% 88.4%;
+  --accent-foreground: 223 18.9% 7.3%;
+
+  --border: 238 20% 84%;
+  --input: 238 20% 84%;
+  --ring: 97 70.5% 64.1%;
+
+  --chart-1: 97 70.5% 48%;
+  --chart-2: 249 45% 56%;
+  --chart-3: 202 72% 54%;
+  --chart-4: 339 78% 58%;
+  --chart-5: 40 78% 58%;
+}
+
+.dark[data-theme-style="highlighter"] {
+  --background: 223 18.9% 7.3%;
+  --foreground: 228 23.8% 95.9%;
+
+  --card: 223 16% 11%;
+  --card-foreground: 228 23.8% 95.9%;
+  --popover: 223 16% 11%;
+  --popover-foreground: 228 23.8% 95.9%;
+
+  --primary: 97 74% 66%;
+  --primary-foreground: 223 18.9% 7.3%;
+  --secondary: 223 12% 18%;
+  --secondary-foreground: 228 23.8% 95.9%;
+  --muted: 223 10% 15%;
+  --muted-foreground: 228 14% 72%;
+  --accent: 223 10% 15%;
+  --accent-foreground: 228 23.8% 95.9%;
+
+  --border: 223 10% 24%;
+  --input: 223 10% 24%;
+  --ring: 97 74% 66%;
+
+  --chart-1: 97 74% 66%;
+  --chart-2: 249 50% 72%;
+  --chart-3: 202 78% 70%;
+  --chart-4: 339 80% 70%;
+  --chart-5: 40 78% 68%;
+}
+
+@layer base {
+  * {
+    border-color: hsl(var(--border));
+  }
+
+  body {
+    @apply bg-background text-foreground antialiased;
+    font-family: var(--font-sans);
+  }
+}
+
+@layer utilities {
+  .hover-elevate {
+    transition: transform 150ms ease, box-shadow 150ms ease;
+  }
+  .hover-elevate:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 12px 30px rgb(0 0 0 / 0.08);
+  }
+
+  .active-elevate-2:active {
+    transform: translateY(0px);
+    box-shadow: 0 6px 18px rgb(0 0 0 / 0.08);
+  }
+
+  @keyframes aurora-shift-x {
+    from {
+      background-position: 0% 50%;
+    }
+    to {
+      background-position: 200% 50%;
+    }
+  }
+
+  @keyframes aurora-shift-y {
+    from {
+      background-position: 50% 0%;
+    }
+    to {
+      background-position: 50% 200%;
+    }
+  }
+
+  @keyframes aurora-breathe {
+    0%,
+    100% {
+      opacity: 0.55;
+    }
+    50% {
+      opacity: 0.95;
+    }
+  }
+
+  @keyframes nebula-float-a {
+    0%,
+    100% {
+      transform: translate3d(0, 0, 0) scale(1);
+    }
+    50% {
+      transform: translate3d(8%, 5%, 0) scale(1.08);
+    }
+  }
+
+  @keyframes nebula-float-b {
+    0%,
+    100% {
+      transform: translate3d(0, 0, 0) scale(1);
+    }
+    50% {
+      transform: translate3d(-7%, 6%, 0) scale(1.12);
+    }
+  }
+
+  @keyframes nebula-float-c {
+    0%,
+    100% {
+      transform: translate3d(0, 0, 0) scale(1);
+    }
+    50% {
+      transform: translate3d(5%, -6%, 0) scale(1.06);
+    }
+  }
+
+  @keyframes grain-shift {
+    0% {
+      transform: translate3d(0, 0, 0);
+    }
+    25% {
+      transform: translate3d(1%, -1%, 0);
+    }
+    50% {
+      transform: translate3d(-1%, 1%, 0);
+    }
+    75% {
+      transform: translate3d(0.5%, 1%, 0);
+    }
+    100% {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @keyframes loader-spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes loader-spin-reverse {
+    from {
+      transform: rotate(360deg);
+    }
+    to {
+      transform: rotate(0deg);
+    }
+  }
+
+  @keyframes loader-core-breathe {
+    0%,
+    100% {
+      transform: scale(0.92);
+      opacity: 0.85;
+    }
+    50% {
+      transform: scale(1.04);
+      opacity: 1;
+    }
+  }
+
+  .nebula-orb {
+    position: absolute;
+    border-radius: 9999px;
+    mix-blend-mode: screen;
+    opacity: 0.72;
+    filter: blur(72px);
+    will-change: transform;
+  }
+
+  .nebula-orb-a {
+    left: -11rem;
+    top: -8rem;
+    height: 34rem;
+    width: 34rem;
+    background: radial-gradient(
+      circle,
+      rgba(56, 189, 248, 0.36) 0%,
+      rgba(99, 102, 241, 0.2) 45%,
+      rgba(255, 255, 255, 0) 72%
+    );
+    animation: nebula-float-a 16s ease-in-out infinite;
+  }
+
+  .nebula-orb-b {
+    right: -13rem;
+    top: 14%;
+    height: 38rem;
+    width: 38rem;
+    background: radial-gradient(
+      circle,
+      rgba(20, 184, 166, 0.33) 0%,
+      rgba(59, 130, 246, 0.16) 46%,
+      rgba(255, 255, 255, 0) 75%
+    );
+    animation: nebula-float-b 18s ease-in-out infinite;
+  }
+
+  .nebula-orb-c {
+    bottom: -16rem;
+    left: 26%;
+    height: 36rem;
+    width: 36rem;
+    background: radial-gradient(
+      circle,
+      rgba(167, 139, 250, 0.24) 0%,
+      rgba(56, 189, 248, 0.12) 45%,
+      rgba(255, 255, 255, 0) 74%
+    );
+    animation: nebula-float-c 15s ease-in-out infinite;
+  }
+
+  .nebula-grain {
+    position: absolute;
+    inset: -20%;
+    background-image: radial-gradient(rgba(15, 23, 42, 0.08) 0.7px, transparent 0.7px);
+    background-size: 3px 3px;
+    opacity: 0.08;
+    animation: grain-shift 8s steps(10) infinite;
+  }
+
+  .luxe-loader {
+    position: relative;
+    height: 96px;
+    width: 96px;
+  }
+
+  .luxe-loader__ring {
+    position: absolute;
+    border-radius: 9999px;
+    border: 2px solid transparent;
+  }
+
+  .luxe-loader__ring--outer {
+    inset: 0;
+    border-top-color: rgba(56, 189, 248, 0.98);
+    border-right-color: rgba(99, 102, 241, 0.94);
+    box-shadow:
+      0 0 18px rgba(56, 189, 248, 0.6),
+      inset 0 0 12px rgba(59, 130, 246, 0.15);
+    animation: loader-spin 1.35s linear infinite;
+  }
+
+  .luxe-loader__ring--inner {
+    inset: 13px;
+    border-left-color: rgba(20, 184, 166, 0.96);
+    border-bottom-color: rgba(56, 189, 248, 0.88);
+    box-shadow: 0 0 14px rgba(20, 184, 166, 0.45);
+    animation: loader-spin-reverse 1.05s linear infinite;
+  }
+
+  .luxe-loader__core {
+    position: absolute;
+    inset: 34px;
+    border-radius: 9999px;
+    background: radial-gradient(
+      circle at 35% 30%,
+      rgba(255, 255, 255, 1) 0%,
+      rgba(210, 237, 255, 0.95) 42%,
+      rgba(107, 172, 255, 0.78) 100%
+    );
+    box-shadow:
+      0 0 24px rgba(56, 189, 248, 0.48),
+      0 0 34px rgba(99, 102, 241, 0.24);
+    animation: loader-core-breathe 2.1s ease-in-out infinite;
+  }
+
+  .luxe-loader__orbit {
+    position: absolute;
+    inset: 0;
+    animation: loader-spin 2.5s linear infinite;
+  }
+
+  .luxe-loader__dot {
+    position: absolute;
+    left: 50%;
+    top: 3px;
+    height: 9px;
+    width: 9px;
+    border-radius: 9999px;
+    transform: translateX(-50%);
+    background: radial-gradient(
+      circle at 30% 30%,
+      rgba(255, 255, 255, 1) 0%,
+      rgba(167, 243, 255, 0.95) 35%,
+      rgba(34, 211, 238, 0.95) 100%
+    );
+    box-shadow:
+      0 0 10px rgba(34, 211, 238, 0.8),
+      0 0 18px rgba(56, 189, 248, 0.5);
+  }
+
+  .aurora-frame {
+    pointer-events: none;
+    position: absolute;
+    inset: 0;
+    z-index: 20;
+  }
+
+  .aurora-edge {
+    position: absolute;
+    opacity: 0.95;
+    will-change: background-position, opacity;
+  }
+
+  .aurora-edge.is-glow {
+    filter: blur(16px);
+    opacity: 0.75;
+  }
+
+  .aurora-edge.top,
+  .aurora-edge.bottom {
+    left: 0;
+    right: 0;
+    height: 4px;
+    background-image: linear-gradient(
+      90deg,
+      rgba(16, 185, 129, 0.2),
+      rgba(34, 211, 238, 1),
+      rgba(59, 130, 246, 1),
+      rgba(16, 185, 129, 0.2)
+    );
+    background-size: 320% 100%;
+    box-shadow:
+      0 0 8px rgba(34, 211, 238, 0.9),
+      0 0 22px rgba(59, 130, 246, 0.65);
+    animation:
+      aurora-shift-x 5.2s linear infinite,
+      aurora-breathe 2.6s ease-in-out infinite;
+  }
+
+  .aurora-edge.top {
+    top: 0;
+  }
+
+  .aurora-edge.bottom {
+    bottom: 0;
+    animation-direction: reverse, normal;
+  }
+
+  .aurora-edge.left,
+  .aurora-edge.right {
+    top: 0;
+    bottom: 0;
+    width: 4px;
+    background-image: linear-gradient(
+      180deg,
+      rgba(16, 185, 129, 0.2),
+      rgba(34, 211, 238, 1),
+      rgba(59, 130, 246, 1),
+      rgba(16, 185, 129, 0.2)
+    );
+    background-size: 100% 320%;
+    box-shadow:
+      0 0 8px rgba(34, 211, 238, 0.85),
+      0 0 20px rgba(59, 130, 246, 0.6);
+    animation:
+      aurora-shift-y 5.8s linear infinite,
+      aurora-breathe 3s ease-in-out infinite;
+  }
+
+  .aurora-edge.left {
+    left: 0;
+  }
+
+  .aurora-edge.right {
+    right: 0;
+    animation-direction: reverse, normal;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .nebula-orb,
+    .nebula-grain,
+    .luxe-loader__ring--outer,
+    .luxe-loader__ring--inner,
+    .luxe-loader__core,
+    .luxe-loader__orbit {
+      animation: none;
+    }
+
+    .aurora-edge {
+      animation: none;
+      opacity: 0.75;
+    }
+  }
+}
+
+html[data-preview-shield="on"] nextjs-portal,
+html[data-preview-shield="on"] script[data-nextjs-dev-overlay] {
+  display: none !important;
+}