/* CreskStudio 1.4 — shared camera and elevated presentation text.
   Local scene tone determines ink. Both tones share height and motion. */
.cs-type-space {
  --type-camera: 1500px;
  --type-ink: #08090a;
  --type-shadow: rgb(8 9 10 / .20);
  --type-edge: rgb(250 249 245 / .16);
  perspective: var(--type-camera);
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
}
[data-theme=dark] .cs-type-space,
.cs-type-space[data-type-tone=light] {
  --type-ink: #faf9f5;
  --type-shadow: rgb(0 0 0 / .48);
  --type-edge: rgb(250 249 245 / .20);
}
.cs-type-space[data-type-tone=dark] {
  --type-ink: #08090a;
  --type-shadow: rgb(8 9 10 / .20);
  --type-edge: rgb(250 249 245 / .16);
}
.cs-type-space .cs-type-space { perspective: none; }
.cs-type-plane {
  --type-depth: 48px;
  --type-x: 0px;
  --type-y: 0px;
  --type-rx: 2deg;
  --type-ry: -2deg;
  position: relative;
  transform-style: preserve-3d;
  transform: translate3d(var(--type-x),var(--type-y),var(--type-depth))
    rotateX(var(--type-rx)) rotateY(var(--type-ry));
  transform-origin: 50% 50%;
}
.cs-type-face {
  position: relative;
  display: block;
  color: var(--type-ink);
  font-weight: 500;
  opacity: .97;
  text-shadow: 0 .018em 0 var(--type-edge), .12em .23em .11em var(--type-shadow);
}
.cs-type-caption { position: relative; transform: translateZ(-18px); }
@media(max-width:760px) {
  .cs-type-plane { --type-depth: 24px; --type-rx: 1deg; --type-ry: -1deg; }
  .cs-type-face { text-shadow: 0 .018em 0 var(--type-edge), .09em .17em .1em var(--type-shadow); }
}
@media(prefers-reduced-motion:reduce) {
  .cs-type-plane { transform: none; }
  .cs-type-face { text-shadow: none; }
}