/* TOBIRA clean-room previews for the pinned component archive. */
.faithful-preview {
  --fp-paper: #f2efe9;
  --fp-ink: #090909;
  --fp-dim: rgba(242, 239, 233, .5);
  --fp-surface: #121211;
  --fp-light: var(--fp-paper);
  --fp-ease: cubic-bezier(.22, 1, .36, 1);
  /* 文字サイズを置かれた箱の寸法（cqi/cqh）で上限できるようにする */
  container-type: size;
  isolation: isolate;
  background: #11110f;
}
.faithful-preview::before {
  opacity: .26;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, .04), transparent 42%),
    radial-gradient(circle at 50% 118%, rgba(255, 255, 255, .04), transparent 48%);
}
.faithful-preview > div {
  position: absolute;
  inset: 0;
}
/* Fields: gradient, plasma, dither, liquid, noise, particles, rays, ripple. */
.fp-field-stage {
  display: grid;
  place-items: center;
  overflow: hidden;
}
.fp-field-layer {
  position: absolute;
  top: calc(17% + var(--i) * 15%);
  left: 14%;
  width: 72%;
  height: 12%;
  border-radius: 999px;
  opacity: 1;
  background: var(--fp-paper);
  filter: none;
  mix-blend-mode: normal;
  transform-origin: center;
  animation: fp-gradient-band 5.4s var(--fp-ease) var(--field-delay) infinite alternate;
}
.fp-field-layer:nth-of-type(odd) { background: var(--source-accent); }
.fp-field-layer:nth-of-type(even) { left: 26%; width: 60%; }

/* Animated Gradient: four physical color bands, never an ambient bloom. */
.faithful-preview[data-variant="animated-gradient"] .fp-field-layer:nth-of-type(even) {
  background: var(--fp-paper);
  animation-direction: alternate-reverse;
}

/* Closing Plasma: nested contours contract toward a stable center. */
.faithful-preview[data-variant="closing-plasma"] .fp-field-layer {
  top: 47%;
  left: 50%;
  width: calc(24% + var(--i) * 13%);
  height: auto;
  aspect-ratio: 1;
  border: 2px solid var(--fp-paper);
  border-radius: 34% 66% 42% 58%;
  background: transparent;
  animation: fp-plasma-close 4.8s var(--fp-ease) var(--field-delay) infinite alternate;
}
.faithful-preview[data-variant="closing-plasma"] .fp-field-layer:nth-of-type(odd) {
  border-color: var(--source-accent);
}

/* Liquid Blob: opaque organic surfaces with no blur or translucent fog. */
.faithful-preview[data-variant="liquid-blob"] .fp-field-layer {
  top: 22%;
  left: 17%;
  width: 48%;
  height: 54%;
  border-radius: 44% 56% 63% 37% / 40% 38% 62% 60%;
  background: var(--source-accent);
  animation: fp-blob-morph 5.8s var(--fp-ease) var(--field-delay) infinite alternate;
}
.faithful-preview[data-variant="liquid-blob"] .fp-field-layer:nth-of-type(2) {
  top: 25%;
  left: 42%;
  width: 41%;
  height: 47%;
  background: var(--fp-paper);
  animation-direction: alternate-reverse;
}
.faithful-preview[data-variant="liquid-blob"] .fp-field-layer:nth-of-type(3) {
  top: 34%;
  left: 35%;
  width: 28%;
  height: 31%;
  background: #141412;
}
.faithful-preview[data-variant="liquid-blob"] .fp-field-layer:nth-of-type(4) {
  top: 18%;
  left: 56%;
  width: 17%;
  height: 20%;
  background: var(--source-accent);
}

/* Liquid Chrome: hard specular steps make the material legible. */
.faithful-preview[data-variant="liquid-chrome"] .fp-field-layer {
  top: 20%;
  left: 19%;
  width: 54%;
  height: 58%;
  border-radius: 57% 43% 38% 62% / 45% 61% 39% 55%;
  background: var(--fp-paper);
  box-shadow: inset 18px 0 0 #fff, inset -18px 0 0 #77736c;
  animation: fp-chrome-step 6.2s var(--fp-ease) var(--field-delay) infinite alternate;
}
.faithful-preview[data-variant="liquid-chrome"] .fp-field-layer:nth-of-type(2) {
  top: 27%;
  left: 42%;
  width: 39%;
  height: 45%;
  background: #77736c;
  box-shadow: inset 12px 0 0 var(--fp-paper), inset -12px 0 0 #272623;
}
.faithful-preview[data-variant="liquid-chrome"] .fp-field-layer:nth-of-type(3) {
  top: 35%;
  left: 33%;
  width: 31%;
  height: 30%;
  background: #10100f;
  box-shadow: none;
}
.faithful-preview[data-variant="liquid-chrome"] .fp-field-layer:nth-of-type(4) {
  top: 24%;
  left: 56%;
  width: 16%;
  height: 19%;
  background: var(--source-accent);
  box-shadow: none;
}

/* Prism Gradient: a four-face solid prism rather than a blurred gradient. */
.faithful-preview[data-variant="prism-gradient"] .fp-field-layer {
  top: 14%;
  left: 21%;
  width: 58%;
  height: 66%;
  border-radius: 0;
  background: var(--source-accent);
  animation: fp-prism-breathe 5.6s var(--fp-ease) var(--field-delay) infinite alternate;
}
.faithful-preview[data-variant="prism-gradient"] .fp-field-layer:nth-of-type(1) {
  clip-path: polygon(0 0, 100% 0, 50% 50%);
  background: var(--fp-paper);
}
.faithful-preview[data-variant="prism-gradient"] .fp-field-layer:nth-of-type(2) {
  clip-path: polygon(100% 0, 100% 100%, 50% 50%);
  background: var(--source-accent);
}
.faithful-preview[data-variant="prism-gradient"] .fp-field-layer:nth-of-type(3) {
  clip-path: polygon(0 100%, 100% 100%, 50% 50%);
  background: #77736c;
}
.faithful-preview[data-variant="prism-gradient"] .fp-field-layer:nth-of-type(4) {
  clip-path: polygon(0 0, 50% 50%, 0 100%);
  background: #242320;
}

/* Silk Aurora: crisp curved ribbons carry the motion. */
.faithful-preview[data-variant="silk-aurora"] .fp-field-layer {
  top: calc(10% + var(--i) * 14%);
  left: -10%;
  width: 120%;
  height: 28%;
  border-top: 5px solid var(--fp-paper);
  border-radius: 50%;
  background: transparent;
  animation: fp-silk-ribbon 5.8s var(--fp-ease) var(--field-delay) infinite alternate;
}
.faithful-preview[data-variant="silk-aurora"] .fp-field-layer:nth-of-type(odd) {
  border-color: var(--source-accent);
}

/* WebGL Liquid: moving contour loops over a generated wire grid. */
.faithful-preview[data-variant="webgl-liquid"] .fp-field-stage {
  background:
    linear-gradient(rgba(242, 239, 233, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 239, 233, .08) 1px, transparent 1px),
    #0b0b0a;
  background-size: 24px 24px;
}
.faithful-preview[data-variant="webgl-liquid"] .fp-field-layer {
  top: 47%;
  left: 50%;
  width: calc(27% + var(--i) * 10%);
  height: auto;
  aspect-ratio: 1.15;
  border: 2px solid var(--fp-paper);
  border-radius: 58% 42% 62% 38% / 44% 61% 39% 56%;
  background: transparent;
  animation: fp-webgl-contour 6.4s var(--fp-ease) var(--field-delay) infinite alternate;
}
.faithful-preview[data-variant="webgl-liquid"] .fp-field-layer:nth-of-type(odd) {
  border-color: var(--source-accent);
}

/* Warp Background: receding frames form a tunnel without a light cloud. */
.faithful-preview[data-variant="warp-background"] .fp-field-stage {
  perspective: 520px;
}
.faithful-preview[data-variant="warp-background"] .fp-field-layer {
  top: 46%;
  left: 50%;
  width: 58%;
  height: 42%;
  border: 2px solid var(--fp-paper);
  border-radius: 12px;
  background: transparent;
  animation: fp-warp-frame 4.2s linear var(--field-delay) infinite;
}
.faithful-preview[data-variant="warp-background"] .fp-field-layer:nth-of-type(odd) {
  border-color: var(--source-accent);
}

.faithful-preview[data-variant*="dither"] .fp-field-layer {
  top: 12%;
  left: 9%;
  width: 82%;
  height: 72%;
  border-radius: 0;
  opacity: 1;
  background:
    radial-gradient(circle, rgba(9, 9, 9, .72) 0 1px, transparent 1.4px) 0 0 / 7px 7px,
    linear-gradient(125deg, #242320 0%, var(--source-accent) 48%, var(--fp-paper) 100%);
  filter: contrast(1.45);
  mask-image: none;
  mix-blend-mode: normal;
  animation: fp-dither-plane 5.2s var(--fp-ease) infinite alternate;
}
.faithful-preview[data-variant*="dither"] .fp-field-layer:nth-of-type(n + 2) {
  display: none;
}
.faithful-preview[data-variant="dither-prism-hero"] .fp-field-layer {
  background:
    radial-gradient(circle, rgba(242, 239, 233, .76) 0 1px, transparent 1.4px) 0 0 / 7px 7px,
    conic-gradient(from 45deg, var(--source-accent) 0 25%, #eee8dc 25% 50%, #242320 50% 75%, var(--source-accent) 75% 100%);
}
.faithful-preview[data-variant="noise-texture"] .fp-field-layer {
  top: 12%;
  left: 9%;
  width: 82%;
  height: 72%;
  border-radius: 10px;
  opacity: 1;
  background:
    repeating-radial-gradient(circle at 32% 42%, rgba(242, 239, 233, .42) 0 1px, transparent 1px 4px);
  filter: contrast(1.7);
  mix-blend-mode: normal;
  animation: fp-noise-plane 4.8s steps(4) infinite alternate;
}
.faithful-preview[data-variant="noise-texture"] .fp-field-layer:nth-of-type(n + 2) {
  display: none;
}
.fp-grain {
  position: absolute;
  inset: -40%;
  opacity: .36;
  background:
    repeating-radial-gradient(circle, rgba(255, 255, 255, .42) 0 1px, transparent 1px 3px);
  transform: translate3d(0, 0, 0);
  animation: fp-grain-shift .34s steps(2) infinite;
}
.fp-ray {
  position: absolute;
  top: -38%;
  left: var(--ray-x);
  width: 13%;
  height: 140%;
  opacity: .22;
  background: linear-gradient(180deg, var(--fp-paper) 0 70%, transparent 70%);
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
  filter: none;
  transform: rotate(calc(-18deg + var(--i) * 2deg));
  transform-origin: 50% 0;
  animation: fp-ray-sway 4.6s ease-in-out var(--ray-delay) infinite alternate;
}
.fp-meteor {
  position: absolute;
  top: var(--meteor-y);
  left: var(--meteor-x);
  width: 46px;
  height: 1px;
  opacity: 0;
  background: var(--source-accent);
  transform: rotate(-34deg) translate3d(80px, -60px, 0);
  animation: fp-meteor-fall 4.8s linear var(--meteor-delay) infinite;
}
.fp-particle {
  position: absolute;
  top: var(--particle-y);
  left: var(--particle-x);
  width: var(--particle-size);
  height: var(--particle-size);
  border-radius: 50%;
  background: var(--source-accent);
  animation: fp-particle-float 6s ease-in-out var(--particle-delay) infinite alternate;
}
.fp-ripple-ring {
  position: absolute;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--source-accent);
  animation: fp-ripple-expand 2.3s ease-out var(--ripple-delay) infinite;
}
.fp-ripple-core {
  position: relative;
  z-index: 2;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 50%;
  background: var(--source-accent);
  color: #090909;
}
@keyframes fp-gradient-band {
  from { transform: translate3d(-9%, 0, 0) scaleX(.84); }
  to { transform: translate3d(9%, 0, 0) scaleX(1.04); }
}
@keyframes fp-plasma-close {
  from { opacity: .34; transform: translate3d(-50%, -50%, 0) rotate(calc(var(--i) * 18deg)) scale(1.08); }
  to { opacity: 1; transform: translate3d(-50%, -50%, 0) rotate(calc(var(--i) * 18deg + 34deg)) scale(.68); }
}
@keyframes fp-blob-morph {
  0% { border-radius: 44% 56% 63% 37% / 40% 38% 62% 60%; transform: rotate(-9deg) scale(.72); }
  50% { border-radius: 63% 37% 36% 64% / 52% 65% 35% 48%; }
  100% { border-radius: 35% 65% 57% 43% / 67% 35% 65% 33%; transform: rotate(12deg) scale(1.04); }
}
@keyframes fp-chrome-step {
  from { transform: translate3d(-5px, 4px, 0) rotate(calc(-8deg + var(--i) * 3deg)) scale(.9); }
  to { transform: translate3d(7px, -5px, 0) rotate(calc(7deg - var(--i) * 2deg)) scale(1.03); }
}
@keyframes fp-prism-breathe {
  from { transform: translate3d(calc(-3px + var(--i) * 2px), 2px, 0) scale(.96); }
  to { transform: translate3d(calc(3px - var(--i) * 2px), -2px, 0) scale(1.015); }
}
@keyframes fp-silk-ribbon {
  from { transform: translate3d(-3%, 5px, 0) rotate(calc(-6deg + var(--i) * 2deg)) scaleY(.78); }
  to { transform: translate3d(3%, -6px, 0) rotate(calc(4deg - var(--i) * 1deg)) scaleY(1.14); }
}
@keyframes fp-webgl-contour {
  from { transform: translate3d(-50%, -50%, 0) rotate(calc(var(--i) * -11deg)) scale(.86); }
  to { transform: translate3d(-50%, -50%, 0) rotate(calc(var(--i) * 14deg + 18deg)) scale(1.04); }
}
@keyframes fp-warp-frame {
  0% { opacity: 0; transform: translate3d(-50%, -50%, -120px) scale(.38); }
  18% { opacity: 1; }
  82% { opacity: .82; }
  100% { opacity: 0; transform: translate3d(-50%, -50%, 80px) scale(1.58); }
}
@keyframes fp-dither-plane {
  from { transform: translate3d(-2%, 1%, 0) rotate(-1deg); }
  to { transform: translate3d(2%, -1%, 0) rotate(1deg); }
}
@keyframes fp-noise-plane {
  from { transform: translate3d(-1.5%, 1%, 0) scale(1); }
  to { transform: translate3d(1.5%, -1%, 0) scale(1.025); }
}
@keyframes fp-grain-shift {
  0% { transform: translate3d(-2%, 1%, 0); }
  100% { transform: translate3d(2%, -1%, 0); }
}
@keyframes fp-ray-sway {
  from { opacity: .18; transform: rotate(calc(-23deg + var(--i) * 2deg)) scaleX(.72); }
  to { opacity: .54; transform: rotate(calc(-12deg + var(--i) * 2deg)) scaleX(1.2); }
}
@keyframes fp-meteor-fall {
  0%, 68% { opacity: 0; transform: rotate(-34deg) translate3d(80px, -60px, 0); }
  72% { opacity: 1; }
  100% { opacity: 0; transform: rotate(-34deg) translate3d(-170px, 120px, 0); }
}
@keyframes fp-particle-float {
  from { opacity: .22; transform: translate3d(-6px, 8px, 0) scale(.72); }
  to { opacity: 1; transform: translate3d(10px, -12px, 0) scale(1.2); }
}
@keyframes fp-ripple-expand {
  from { opacity: .8; transform: scale(.45); }
  to { opacity: 0; transform: scale(3.6); }
}

/* Procedural patterns. */
.fp-pattern-stage {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #0c0c0b;
}
.fp-pattern-grid {
  width: 84%;
  height: 76%;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  perspective: 500px;
  transform: rotateX(4deg);
}
.fp-pattern-cell {
  min-width: 0;
  background: #23221f;
  box-shadow: inset 0 0 0 1px rgba(242, 239, 233, .035);
  animation: fp-cell-flicker 4s steps(1) var(--cell-delay) infinite;
}
.faithful-preview[data-variant="hexagon-pattern"] .fp-pattern-cell {
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
}
.faithful-preview[data-variant="striped-pattern"] .fp-pattern-cell {
  background: repeating-linear-gradient(135deg, transparent 0 4px, var(--source-accent) 4px 5px);
}
.faithful-preview[data-variant="interactive-grid-pattern"] .fp-pattern-cell:nth-child(4n + 2),
.faithful-preview[data-variant="animated-grid-pattern"] .fp-pattern-cell:nth-child(3n) {
  background: var(--source-accent);
}
.fp-glyph-column {
  position: relative;
  width: 7%;
  color: var(--fp-paper);
  font-family: var(--tobira-font-code);
  font-size: min(clamp(7px, 1vw, 14px), 4cqi);
  line-height: 1.5;
  text-align: center;
  white-space: pre-line;
  animation: fp-glyph-rain 3.6s linear var(--column-delay) infinite;
}
.fp-glyph-column:nth-child(odd) { color: var(--source-accent); }
.fp-circuit {
  width: 92%;
  height: 82%;
  overflow: visible;
}
.fp-circuit-wire {
  fill: none;
  stroke: rgba(242, 239, 233, .18);
  stroke-width: 2;
}
.fp-circuit-wire::selection { background: transparent; }
.fp-circuit-wire {
  stroke-dasharray: .16 .84;
  stroke-dashoffset: 1;
  animation: fp-circuit-run 3.8s linear calc(var(--i) * -.7s) infinite;
}
.fp-circuit-node {
  fill: var(--source-accent);
  animation: fp-circuit-node 2.4s ease-in-out calc(var(--i) * -.22s) infinite alternate;
}
.faithful-preview[data-variant="magnet-lines"] .fp-pattern-stage {
  grid-template-columns: repeat(9, 1fr);
  grid-auto-rows: 1fr;
  gap: 7px;
  padding: 13% 10%;
}
.fp-magnet-line {
  width: 90%;
  height: 2px;
  background: var(--source-accent);
  transform: rotate(var(--line-angle));
  transform-origin: 50% 50%;
  animation: fp-magnet-turn 2.8s var(--fp-ease) calc(var(--i) * -17ms) infinite alternate;
}
.fp-magnet-line:nth-child(even) { background: var(--fp-paper); }
.fp-pattern-cursor {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--source-accent);
  animation: fp-pattern-cursor 2.8s var(--fp-ease) infinite alternate;
}
.fp-pixel-logo {
  width: min(68%, 250px);
  aspect-ratio: 12 / 8;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2px;
}
.fp-pixel {
  background: var(--source-accent);
  opacity: var(--pixel-alpha);
  animation: fp-pixel-bloom 3s ease-in-out var(--pixel-delay) infinite alternate;
}
.fp-retro-sun {
  position: absolute;
  top: 15%;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background:
    repeating-linear-gradient(180deg, #e9e2d7 0 6px, transparent 6px 9px),
    var(--source-accent);
}
.fp-retro-floor {
  position: absolute;
  right: -20%;
  bottom: -36%;
  left: -20%;
  height: 82%;
  background:
    linear-gradient(var(--source-accent) 1px, transparent 1px),
    linear-gradient(90deg, var(--source-accent) 1px, transparent 1px);
  background-size: 32px 24px;
  mask-image: linear-gradient(180deg, transparent, #000 40%);
  transform: perspective(280px) rotateX(64deg);
  transform-origin: 50% 100%;
  animation: fp-retro-drive 2.2s linear infinite;
}
@keyframes fp-cell-flicker {
  0%, 36%, 100% { opacity: .32; transform: scale(.92); }
  38%, 58% { opacity: .92; transform: scale(1); }
}
@keyframes fp-glyph-rain {
  from { opacity: 0; transform: translate3d(0, -58%, 0); }
  24% { opacity: 1; }
  to { opacity: 0; transform: translate3d(0, 58%, 0); }
}
@keyframes fp-circuit-run {
  to { stroke-dashoffset: 0; stroke: var(--source-accent); }
}
@keyframes fp-circuit-node {
  from { opacity: .32; transform: scale(.7); transform-origin: center; }
  to { opacity: 1; transform: scale(1.25); transform-origin: center; }
}
@keyframes fp-magnet-turn {
  from { transform: rotate(calc(var(--line-angle) - 18deg)); }
  to { transform: rotate(calc(var(--line-angle) + 42deg)); }
}
@keyframes fp-pattern-cursor {
  from { transform: translate3d(-78px, -44px, 0); }
  to { transform: translate3d(90px, 52px, 0); }
}
@keyframes fp-pixel-bloom {
  from { opacity: calc(var(--pixel-alpha) * .25); transform: scale(.58); }
  to { opacity: var(--pixel-alpha); transform: scale(1); }
}
@keyframes fp-retro-drive {
  to { background-position: 0 24px, 32px 0; }
}

/* Typography families. */
.fp-type-stage {
  display: grid;
  place-items: center;
  overflow: hidden;
}
.fp-type-word {
  position: relative;
  z-index: 2;
  display: flex;
  max-width: 88%;
  color: var(--fp-paper);
  font-family: var(--tobira-font-display);
  font-size: clamp(27px, min(4.6vw, 13cqi), 78px);
  font-weight: 900;
  letter-spacing: -.08em;
  line-height: .9;
  perspective: 500px;
  white-space: pre;
}
.fp-glyph {
  position: relative;
  display: inline-block;
  min-width: .12em;
  transform-origin: 50% 100%;
  animation: fp-type-rise 2.6s var(--fp-ease) calc(var(--i) * -55ms) infinite alternate;
}
.faithful-preview[data-variant*="hyper-text"] .fp-glyph,
.faithful-preview[data-variant="text-scramble"] .fp-glyph {
  color: transparent;
}
.faithful-preview[data-variant*="hyper-text"] .fp-glyph::before,
.faithful-preview[data-variant="text-scramble"] .fp-glyph::before {
  content: attr(data-char);
  position: absolute;
  color: var(--fp-paper);
  animation: fp-scramble-char 2.4s steps(1) calc(var(--i) * 45ms) infinite;
}
.faithful-preview[data-variant*="hyper-text"] .fp-glyph::after,
.faithful-preview[data-variant="text-scramble"] .fp-glyph::after {
  content: attr(data-alt);
  position: absolute;
  inset: 0;
  color: var(--source-accent);
  animation: fp-scramble-alt 2.4s steps(1) calc(var(--i) * 45ms) infinite;
}
.faithful-preview[data-variant="kinetic-text"] .fp-glyph {
  animation-name: fp-kinetic-weight;
}
.faithful-preview[data-variant="text-3d-flip"] .fp-glyph {
  animation-name: fp-type-flip;
}
.faithful-preview[data-variant="typing-animation"] .fp-type-word {
  overflow: hidden;
  width: 10.6ch;
  border-right: 2px solid var(--source-accent);
  animation: fp-typewriter 3.8s steps(13) infinite;
}
.faithful-preview[data-variant="typing-animation"] .fp-glyph { animation: none; }
.faithful-preview[data-variant="animated-gradient-text"] .fp-type-word,
.faithful-preview[data-variant="aurora-text"] .fp-type-word,
.faithful-preview[data-variant="animated-shiny-text"] .fp-type-word,
.faithful-preview[data-variant="text-shimmer"] .fp-type-word,
.faithful-preview[data-variant="text-shimmer-wave"] .fp-type-word,
.faithful-preview[data-variant="line-shadow-text"] .fp-type-word {
  color: transparent;
  background: linear-gradient(
    105deg,
    #6d675f 0 24%,
    var(--fp-paper) 24% 49%,
    var(--source-accent) 49% 68%,
    #6d675f 68% 100%
  );
  background-size: 260% 100%;
  background-clip: text;
  animation: fp-text-shine 3.4s linear infinite;
}
.faithful-preview[data-variant="comic-text"] .fp-type-word {
  color: var(--source-accent);
  filter: drop-shadow(4px 4px 0 #f2efe9) drop-shadow(7px 7px 0 #090909);
  transform: rotate(-4deg);
}
.faithful-preview[data-variant="dia-text-reveal"] .fp-type-word,
.faithful-preview[data-variant="kinetic-text-reveal"] .fp-type-word,
.faithful-preview[data-variant="text-reveal"] .fp-type-word,
.faithful-preview[data-variant="blur-fade"] .fp-type-word {
  clip-path: inset(0 100% 0 0);
  filter: blur(8px);
  animation: fp-text-reveal 3.4s var(--fp-ease) infinite;
}
.faithful-preview[data-variant="letter-cascade"] .fp-glyph {
  animation-name: fp-letter-cascade;
}
.fp-word-cycle {
  position: relative;
  width: 80%;
  height: 64px;
  overflow: hidden;
}
.fp-cycle-word {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--fp-paper);
  font-family: var(--tobira-font-display);
  font-size: clamp(30px, min(4vw, 18cqi), 72px);
  letter-spacing: -.06em;
  opacity: 0;
  animation: fp-word-cycle 4.5s var(--fp-ease) calc(var(--i) * 1.5s) infinite;
}
.fp-spinning-type {
  position: relative;
  width: min(56%, 190px);
  aspect-ratio: 1;
  animation: fp-ring-spin 10s linear infinite;
}
.fp-ring-glyph {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 48%;
  color: var(--fp-paper);
  font-size: 9px;
  font-weight: 800;
  transform: translate(-50%, -100%) rotate(var(--ring-angle));
  transform-origin: 50% 100%;
}
.fp-ring-core {
  position: absolute;
  inset: 31%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--source-accent);
  color: #090909;
  font-size: 24px;
  font-style: normal;
}
.fp-highlight-word {
  position: relative;
  color: var(--fp-paper);
  font-family: var(--tobira-font-display);
  font-size: clamp(24px, min(3.5vw, 12cqi), 62px);
  font-weight: 900;
  letter-spacing: -.05em;
}
.fp-marker-stroke {
  position: absolute;
  right: -3%;
  bottom: .02em;
  left: -3%;
  z-index: -1;
  height: .34em;
  background: var(--source-accent);
  clip-path: polygon(0 28%, 100% 0, 97% 82%, 2% 100%);
  transform-origin: 0 50%;
  animation: fp-marker-draw 2.8s var(--fp-ease) infinite;
}
.fp-signature-guide {
  position: absolute;
  width: 68%;
  height: 1px;
  background: rgba(242, 239, 233, .16);
}
.fp-system-signature {
  color: var(--fp-paper);
  font-family: "Snell Roundhand", "Segoe Script", cursive;
  font-size: clamp(42px, min(6vw, 20cqi), 100px);
  font-weight: 500;
  letter-spacing: -.08em;
  clip-path: inset(0 100% 0 0);
  animation: fp-signature-write 3.6s var(--fp-ease) infinite;
}
.fp-type-spark {
  position: absolute;
  top: var(--spark-y);
  left: var(--spark-x);
  color: var(--source-accent);
  font-size: var(--spark-size);
  font-style: normal;
  animation: fp-type-spark 2.4s ease-in-out calc(var(--i) * -.22s) infinite;
}
.fp-video-text-fill {
  position: absolute;
  inset: 12%;
  z-index: 0;
  background:
    radial-gradient(circle at 24% 38%, var(--fp-paper), transparent 18%),
    conic-gradient(from 120deg, #090909, #807b73, #d9d3c8, #090909);
  opacity: .28;
  mix-blend-mode: screen;
  animation: fp-video-pan 7s ease-in-out infinite alternate;
}
@keyframes fp-type-rise {
  from { opacity: .34; transform: translate3d(0, .3em, 0) rotateX(-32deg); }
  to { opacity: 1; transform: translate3d(0, 0, 0) rotateX(0); }
}
@keyframes fp-scramble-char {
  0%, 28% { opacity: 0; }
  52%, 100% { opacity: 1; }
}
@keyframes fp-scramble-alt {
  0%, 12%, 24%, 36% { opacity: 1; transform: translateY(-.08em); }
  48%, 100% { opacity: 0; transform: none; }
}
@keyframes fp-kinetic-weight {
  from { font-weight: 300; transform: translateY(.08em) scaleY(.9); }
  to { font-weight: 900; transform: none; }
}
@keyframes fp-type-flip {
  from { opacity: .22; transform: rotateX(-92deg) translateY(.2em); }
  to { opacity: 1; transform: rotateX(0) translateY(0); }
}
@keyframes fp-typewriter {
  0%, 12% { width: 0; }
  58%, 84% { width: 10.6ch; }
  100% { width: 0; }
}
@keyframes fp-text-shine {
  to { background-position: -160% 0; }
}
@keyframes fp-text-reveal {
  0%, 16% { clip-path: inset(0 100% 0 0); filter: blur(8px); transform: translateY(8px); }
  58%, 82% { clip-path: inset(0); filter: blur(0); transform: none; }
  100% { clip-path: inset(0 0 0 100%); filter: blur(5px); }
}
@keyframes fp-letter-cascade {
  0%, 18% { opacity: 0; transform: translate3d(0, -1em, 0) rotate(-12deg); }
  62%, 100% { opacity: 1; transform: none; }
}
@keyframes fp-word-cycle {
  0% { opacity: 0; transform: translateY(72%) rotateX(-45deg); }
  12%, 26% { opacity: 1; transform: none; }
  34%, 100% { opacity: 0; transform: translateY(-72%) rotateX(45deg); }
}
@keyframes fp-ring-spin {
  to { transform: rotate(1turn); }
}
@keyframes fp-marker-draw {
  0%, 16% { transform: scaleX(0); }
  52%, 82% { transform: scaleX(1); }
  100% { transform: scaleX(0); transform-origin: 100% 50%; }
}
@keyframes fp-signature-write {
  0%, 14% { clip-path: inset(0 100% 0 0); }
  62%, 86% { clip-path: inset(0); }
  100% { clip-path: inset(0 0 0 100%); }
}
@keyframes fp-type-spark {
  0%, 100% { opacity: 0; transform: scale(.3) rotate(-20deg); }
  48% { opacity: 1; transform: scale(1.25) rotate(16deg); }
}
@keyframes fp-video-pan {
  from { transform: scale(1.08) translate3d(-3%, 0, 0); }
  to { transform: scale(1.18) translate3d(3%, -2%, 0); }
}

/* Number and progress motion. */
.fp-number-stage {
  display: grid;
  place-items: center;
}
.fp-digit-display {
  display: flex;
  /* 窓は字送りより高く取る。1em ちょうどだと重い書体の数字が上下で削れる */
  height: 1.32em;
  overflow: hidden;
  color: var(--fp-paper);
  font-family: var(--tobira-font-display);
  font-size: min(clamp(46px, 7vw, 112px), 30cqh, 26cqi);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.09em;
  line-height: 1.32;
}
.fp-digit-reel {
  display: grid;
  height: 300%;
  transform: translateY(-33.333%);
  animation: fp-digit-roll 2.8s var(--fp-ease) calc(var(--i) * -160ms) infinite alternate;
}
.fp-digit-reel i {
  height: 1.32em;
  color: inherit;
  font-style: normal;
}
.fp-digit-reel:nth-child(2) { color: var(--source-accent); }
.fp-progress-ring {
  width: min(48%, 190px);
  transform: rotate(-90deg);
}
.fp-progress-ring-track,
.fp-progress-ring-value {
  fill: none;
  stroke-width: 8;
}
.fp-progress-ring-track { stroke: rgba(242, 239, 233, .09); }
.fp-progress-ring-value {
  stroke: var(--source-accent);
  stroke-linecap: round;
  stroke-dasharray: 72 100;
  animation: fp-ring-progress 2.8s var(--fp-ease) infinite alternate;
}
.fp-progress-value {
  position: absolute;
  color: var(--fp-paper);
  font-family: var(--tobira-font-display);
  font-size: 22px;
}
.fp-scroll-marker {
  color: var(--fp-dim);
  font-size: 8px;
  letter-spacing: .18em;
}
.fp-scroll-progress-track {
  position: relative;
  width: 70%;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(242, 239, 233, .1);
}
.fp-scroll-progress-track::after {
  content: "";
  display: block;
  width: 68%;
  height: 100%;
  border-radius: inherit;
  background: var(--source-accent);
  animation: fp-scroll-progress 2.6s var(--fp-ease) infinite alternate;
}
.fp-scroll-progress-value {
  color: var(--fp-paper);
  font-family: var(--tobira-font-display);
  font-size: 46px;
  font-variant-numeric: tabular-nums;
}
@keyframes fp-digit-roll {
  from { transform: translateY(0); }
  to { transform: translateY(-66.666%); }
}
@keyframes fp-ring-progress {
  from { stroke-dasharray: 18 100; }
  to { stroke-dasharray: 72 100; }
}
@keyframes fp-scroll-progress {
  from { transform: translateX(-96%); }
  to { transform: translateX(46%); }
}

/* Buttons and direct manipulation. */
.fp-control-stage {
  display: grid;
  place-items: center;
}
.fp-action {
  position: relative;
  min-width: 142px;
  min-height: 50px;
  display: grid;
  overflow: hidden;
  padding: 0 24px;
  place-items: center;
  border-radius: 999px;
  background: var(--source-accent);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .32);
  color: #090909;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
  animation: fp-action-press 2.6s var(--fp-ease) infinite;
}
.fp-action-sheen {
  position: absolute;
  width: 46%;
  height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .72), transparent);
  transform: translateX(-230%) rotate(22deg);
  animation: fp-action-shine 2.8s ease-in-out infinite;
}
.fp-action-ripple {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .68);
  opacity: 0;
}
.faithful-preview[data-variant="ripple-button"] .fp-action-ripple {
  animation: fp-action-ripple 2.2s ease-out infinite;
}
.faithful-preview[data-variant="rainbow-button"] .fp-action {
  background: var(--source-accent);
  animation: fp-action-press 2.6s var(--fp-ease) infinite;
}
.faithful-preview[data-variant*="pulsating"] .fp-action {
  animation: fp-action-pulse 1.8s ease-in-out infinite;
}
.fp-scrub {
  position: relative;
  width: min(70%, 250px);
  height: 54px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 0 18px;
  border-radius: 999px;
  background: rgba(242, 239, 233, .11);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .3);
  color: var(--fp-paper);
}
.fp-scrub small { font-size: 8px; letter-spacing: .14em; }
.fp-scrub strong {
  font-family: var(--tobira-font-display);
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}
.fp-scrub-handle {
  position: absolute;
  bottom: -8px;
  left: 18%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--source-accent);
  animation: fp-scrub-move 2.8s var(--fp-ease) infinite alternate;
}
.fp-theme-toggle {
  position: relative;
  width: 96px;
  height: 50px;
  overflow: hidden;
  border-radius: 999px;
  background: #eae5dc;
  box-shadow: 0 18px 52px rgba(0, 0, 0, .28);
}
.fp-theme-sun,
.fp-theme-moon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #090909;
  font-size: 22px;
}
.fp-theme-moon {
  color: var(--fp-paper);
  opacity: 0;
}
.fp-theme-wipe {
  position: absolute;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: #11110f;
  transform: translate3d(80px, 56px, 0) scale(.2);
  animation: fp-theme-wipe 3.6s var(--fp-ease) infinite;
}
.fp-confetti {
  position: absolute;
  width: 5px;
  height: 9px;
  background: var(--source-accent);
  opacity: 0;
  animation: fp-confetti-burst 2.8s ease-out calc(var(--i) * -22ms) infinite;
}
.fp-confetti:nth-child(even) { background: var(--fp-paper); }
@keyframes fp-action-press {
  0%, 38%, 68%, 100% { transform: scale(1); }
  50% { transform: scale(.93); }
}
@keyframes fp-action-shine {
  0%, 22% { transform: translateX(-230%) rotate(22deg); }
  72%, 100% { transform: translateX(230%) rotate(22deg); }
}
@keyframes fp-action-ripple {
  from { opacity: .8; transform: scale(.3); }
  to { opacity: 0; transform: scale(5.8); }
}
@keyframes fp-action-pulse {
  0%, 100% { transform: scale(.98); }
  50% { transform: scale(1.04); }
}
@keyframes fp-scrub-move {
  from { transform: translateX(0); }
  to { transform: translateX(142px); }
}
@keyframes fp-theme-wipe {
  0%, 18% { transform: translate3d(80px, 56px, 0) scale(.2); }
  55%, 76% { transform: translate3d(-14px, -40px, 0) scale(1); }
  100% { transform: translate3d(-86px, -60px, 0) scale(.2); }
}
@keyframes fp-confetti-burst {
  0%, 48% { opacity: 0; transform: rotate(var(--confetti-angle)) translateY(0) scale(.2); }
  54% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--confetti-angle)) translateY(-86px) scale(1); }
}

/* Accordions and overlays. */
.fp-accordion {
  inset: 15% 11% 13% !important;
  display: grid;
  align-content: center;
  overflow: hidden;
  border-radius: 14px;
  background: #090909;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .38);
}
.fp-accordion-row {
  position: relative;
  box-shadow: 0 -1px 0 rgba(242, 239, 233, .1);
}
.fp-accordion-row:first-child { box-shadow: none; }
.fp-accordion-heading {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  color: var(--fp-paper);
  font-size: 10px;
}
.fp-accordion-indicator {
  position: relative;
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  color: var(--source-accent);
}
.fp-accordion-indicator::before,
.fp-accordion-indicator::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.fp-accordion-indicator::before {
  width: 7px;
  height: 1px;
}
.fp-accordion-indicator::after {
  width: 1px;
  height: 7px;
  transform-origin: 50% 50%;
}
.fp-accordion-indicator.is-open::after {
  transform: translate(-50%, -50%) scaleY(0);
}
.faithful-preview[data-variant="bouncy-accordion"] .fp-accordion-indicator.is-open::after {
  animation-name: fp-bouncy-accordion-indicator-cycle;
  animation-duration: 2.2s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: both;
}
.fp-accordion-content {
  box-sizing: border-box;
  height: 31px;
  margin: 0;
  overflow: hidden;
  padding: 0 14px 11px;
  color: var(--fp-dim);
  font-size: 8px;
  line-height: 1.45;
  transform-origin: 50% 0;
  animation: fp-accordion-open 2.8s var(--fp-ease) infinite alternate;
}
.faithful-preview[data-variant="bouncy-accordion"] .fp-accordion-content {
  animation-name: fp-bouncy-accordion-cycle;
  animation-duration: 2.2s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: both;
}
.fp-dialog-stage {
  display: grid;
  place-items: center;
  overflow: hidden;
}
.fp-dialog-page {
  position: absolute;
  inset: 13% 7%;
  padding: 16px;
  border-radius: 12px;
  background: rgba(242, 239, 233, .055);
}
.fp-dialog-page i {
  display: block;
  width: 68%;
  height: 6px;
  margin-bottom: 9px;
  border-radius: 3px;
  background: rgba(242, 239, 233, .08);
}
.fp-dialog-page i:nth-child(2) { width: 46%; }
.fp-dialog-page i:nth-child(3) { width: 58%; }
.fp-dialog-panel {
  position: relative;
  z-index: 2;
  width: min(68%, 280px);
  display: grid;
  gap: 9px;
  padding: 16px;
  border-radius: 14px;
  background: rgba(242, 239, 233, .94);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .46);
  color: #090909;
  animation: fp-dialog-enter 3s var(--fp-ease) infinite alternate;
}
.faithful-preview[data-variant*="morphing"] .fp-dialog-panel {
  transform-origin: 22% 88%;
  animation-name: fp-dialog-morph;
}
.fp-dialog-panel small { font-size: 7px; letter-spacing: .13em; }
.fp-dialog-panel strong { font-size: 16px; line-height: 1; }
.fp-dialog-panel p { margin: 0; color: #5e5a54; font-size: 8px; line-height: 1.4; }
.fp-dialog-action,
.fp-auth-action {
  min-height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #090909;
  color: var(--fp-paper);
  font-size: 8px;
  font-weight: 900;
}
.fp-auth-field,
.fp-command-search {
  min-height: 30px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 8px;
  background: rgba(9, 9, 9, .065);
  color: #76716a;
  font-size: 8px;
}
.fp-command-result {
  min-height: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  border-radius: 7px;
  font-size: 8px;
  animation: fp-command-result 2.8s steps(1) calc(var(--i) * -.52s) infinite;
}
.fp-command-result kbd { color: #77716a; font-size: 7px; }
.fp-transition-panel {
  position: absolute;
  inset: 16px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--fp-paper);
  color: var(--fp-ink);
  font-size: 26px;
  opacity: 0;
  animation: fp-transition-panel 4.5s var(--fp-ease) calc(var(--i) * 1.5s) infinite;
}
.fp-transition-panel:nth-child(odd) { background: var(--source-accent); }
@keyframes fp-accordion-open {
  from { height: 0; opacity: 0; transform: translateY(-4px); }
  to { height: 31px; opacity: 1; transform: none; }
}
@keyframes fp-bouncy-accordion-cycle {
  0% {
    height: 0;
    opacity: 0;
    transform: translateY(-4px);
    animation-timing-function: cubic-bezier(.23, 1, .32, 1);
  }
  9% {
    height: 33px;
    opacity: 1;
    transform: translateY(0);
    animation-timing-function: cubic-bezier(.23, 1, .32, 1);
  }
  12%, 50% {
    height: 31px;
    opacity: 1;
    transform: translateY(0);
  }
  50% {
    animation-timing-function: cubic-bezier(.23, 1, .32, 1);
  }
  59%, 100% {
    height: 0;
    opacity: 0;
    transform: translateY(-3px);
  }
}
@keyframes fp-bouncy-accordion-indicator-cycle {
  0% {
    transform: translate(-50%, -50%) scaleY(1);
    animation-timing-function: cubic-bezier(.23, 1, .32, 1);
  }
  9%, 50% {
    transform: translate(-50%, -50%) scaleY(0);
  }
  50% {
    animation-timing-function: cubic-bezier(.23, 1, .32, 1);
  }
  59%, 100% {
    transform: translate(-50%, -50%) scaleY(1);
  }
}
@keyframes fp-dialog-enter {
  from { opacity: .28; transform: translateY(16px) scale(.9); }
  to { opacity: 1; transform: none; }
}
@keyframes fp-dialog-morph {
  from { opacity: .42; transform: translate3d(-22%, 28%, 0) scale(.28); border-radius: 999px; }
  to { opacity: 1; transform: none; border-radius: 14px; }
}
@keyframes fp-command-result {
  0%, 32% { background: transparent; color: var(--fp-paper); }
  34%, 52% { background: var(--source-accent); color: var(--fp-ink); }
  54%, 100% { background: transparent; color: var(--fp-paper); }
}
@keyframes fp-transition-panel {
  0% { opacity: 0; transform: translateX(22%) scale(.96); }
  10%, 24% { opacity: 1; transform: none; }
  34%, 100% { opacity: 0; transform: translateX(-22%) scale(.96); }
}

/* Docks, toolbars, stacks, and carousels. */
.fp-dock-stage {
  display: grid;
  place-items: center;
}
.fp-dock {
  position: absolute;
  right: 9%;
  top: 50%;
  left: 9%;
  height: 92px;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 10px;
  padding: 14px;
  border-radius: 26px;
  background: rgba(242, 239, 233, .11);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  backdrop-filter: blur(14px);
  transform: translateY(-50%);
}
.fp-dock-item {
  width: min(clamp(30px, 4vw, 58px), 15cqi);
  height: min(clamp(30px, 4vw, 58px), 15cqi);
  display: grid;
  flex: 0 1 58px;
  place-items: center;
  border-radius: 14px;
  background: var(--source-accent);
  color: var(--fp-ink);
  font-size: min(clamp(12px, 1.5vw, 22px), 6cqi);
  animation: fp-dock-magnify 2.8s var(--fp-ease) calc(var(--i) * 90ms - 1.4s) infinite;
}
.fp-dock-item:nth-child(even) { background: var(--fp-paper); }
.fp-toolbar-extra {
  position: absolute;
  top: 19%;
  display: flex;
  gap: 5px;
  padding: 7px;
  border-radius: 14px;
  background: rgba(242, 239, 233, .12);
  backdrop-filter: blur(12px);
  animation: fp-toolbar-expand 3.2s var(--fp-ease) infinite alternate;
}
.fp-toolbar-extra span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(242, 239, 233, .1);
  color: var(--fp-paper);
}
.fp-stack-stage {
  overflow: hidden;
}
.fp-stack-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 50% 50%;
}
.fp-layered-card {
  width: 19%;
  aspect-ratio: 250 / 320;
  border-radius: 4px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .42);
  transform: translate3d(-50%, -50%, 0) rotate(var(--stack-rotate)) scale(.96);
  animation: fp-layered-stack-cycle 5.2s cubic-bezier(.77, 0, .175, 1) calc(var(--i) * 14ms) infinite;
}
.fp-paper-card {
  width: min(48%, 188px);
  height: 55%;
  display: grid;
  align-content: space-between;
  padding: 16px;
  border-radius: 12px;
  background: var(--fp-paper);
  box-shadow: 0 22px 52px rgba(0, 0, 0, .34);
  color: #090909;
  transform: translate3d(-50%, calc(-50% + var(--i) * 6px), 0) rotate(var(--stack-angle));
  animation: fp-card-fan 3.8s var(--fp-ease) calc(var(--i) * -90ms) infinite alternate;
}
.fp-paper-card:nth-child(even) { background: var(--source-accent); }
.fp-paper-card small { font-size: 7px; }
.fp-paper-card strong { font-family: var(--tobira-font-display); font-size: 18px; }
.faithful-preview[data-variant="sticky-scroll-cards"] .fp-paper-card {
  animation-name: fp-sticky-stack;
}
.fp-carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
  padding: 12% 0 17%;
}
.fp-carousel-slide {
  width: 34%;
  height: 68%;
  flex: 0 0 34%;
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .34);
  opacity: .4;
  transform: scale(.88);
  animation: fp-carousel-focus 4.5s var(--fp-ease) calc(var(--i) * 1.5s) infinite;
}
.fp-carousel-indicator {
  position: absolute;
  right: 18%;
  bottom: 13%;
  left: 18%;
  height: 2px;
  overflow: hidden;
  background: rgba(242, 239, 233, .1);
}
.fp-carousel-indicator::after {
  content: "";
  display: block;
  width: 34%;
  height: 100%;
  background: var(--source-accent);
  animation: fp-carousel-progress 4.5s linear infinite;
}
@keyframes fp-dock-magnify {
  0%, 34%, 74%, 100% { transform: translateY(0) scale(.84); }
  52% { transform: translateY(-14px) scale(1.3); }
}
@keyframes fp-toolbar-expand {
  from { opacity: .36; transform: translateY(22px) scale(.72); }
  to { opacity: 1; transform: none; }
}
@keyframes fp-layered-stack-cycle {
  0%, 20% {
    transform: translate3d(-50%, -50%, 0) rotate(var(--stack-rotate)) scale(.96);
  }
  38%, 68% {
    transform:
      translate3d(calc(-50% + var(--stack-x)), calc(-50% + var(--stack-y)), 0)
      rotate(0)
      scale(1);
  }
  86%, 100% {
    transform: translate3d(-50%, -50%, 0) rotate(var(--stack-rotate)) scale(.96);
  }
}
@keyframes fp-card-fan {
  from { transform: translate3d(-50%, calc(-50% + var(--i) * 4px), 0) rotate(0) scale(.92); }
  to { transform: translate3d(calc(-50% + (var(--i) - 2) * 20px), calc(-50% - abs(var(--i) - 2) * 7px), 0) rotate(var(--stack-angle)) scale(1); }
}
@keyframes fp-sticky-stack {
  from { transform: translate3d(-50%, calc(-50% + var(--i) * 16px), 0) scale(calc(1 - var(--i) * .04)); }
  to { transform: translate3d(-50%, calc(-82% + var(--i) * 38px), 0) scale(1); }
}
@keyframes fp-carousel-focus {
  0%, 10% { opacity: .38; transform: scale(.86) translateY(4px); }
  18%, 32% { opacity: 1; transform: scale(1) translateY(-4px); }
  42%, 100% { opacity: .38; transform: scale(.86) translateY(4px); }
}
@keyframes fp-carousel-progress {
  to { transform: translateX(294%); }
}

/* Media, devices, and local-image studies. */
.fp-media-stage {
  display: grid;
  place-items: center;
  overflow: hidden;
}
.fp-local-plate {
  position: relative;
  display: grid;
  align-content: end;
  gap: 5px;
  overflow: hidden;
  padding: 10px;
  background: linear-gradient(
    110deg,
    #070707 0 68%,
    var(--source-accent) 68% 84%,
    #d8d1c5 84% 100%
  );
  color: var(--fp-paper);
}
.fp-local-plate::before {
  content: "";
  position: absolute;
  inset: 0;
  display: none;
}
.fp-local-plate small,
.fp-local-plate strong {
  position: relative;
  z-index: 2;
}
.fp-local-plate small {
  font-size: 6px;
  letter-spacing: .1em;
}
.fp-local-plate strong {
  font-family: var(--tobira-font-display);
  font-size: min(clamp(8px, 1.4vw, 18px), 6cqi);
  letter-spacing: -.04em;
  line-height: .9;
}
/* 小さな板は外箱の何割かでしかない。板の取り分に合わせて文字を抑えないと語尾が切れる */
.fp-local-plate.fp-layered-card strong { font-size: min(clamp(5px, .7vw, 9px), 2.6cqi); }
.fp-local-plate.fp-image-field-tile strong { font-size: min(clamp(6px, 1vw, 13px), 4.2cqi); }
.fp-local-plate.fp-tilted-cell strong { font-size: min(clamp(5px, .8vw, 11px), 4cqi); }
.fp-local-plate > i {
  position: absolute;
  top: 12%;
  right: 9%;
  width: 28%;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 1px rgba(242, 239, 233, .5),
    inset 0 0 0 8px rgba(9, 9, 9, .14);
}
.fp-layered-card:nth-child(3n + 2),
.fp-carousel-slide:nth-child(3n + 2),
.fp-image-field-tile:nth-child(3n + 2),
.fp-tilted-cell:nth-child(3n + 2) {
  filter: hue-rotate(34deg) saturate(.72);
}
.fp-layered-card:nth-child(4n),
.fp-carousel-slide:nth-child(4n),
.fp-image-field-tile:nth-child(4n),
.fp-tilted-cell:nth-child(4n) {
  filter: grayscale(.45) contrast(1.12);
}
.fp-handset {
  position: relative;
  width: min(37%, 148px);
  height: 72%;
  padding: 7px;
  border-radius: 24px;
  background: #262522;
  box-shadow: 14px 18px 46px rgba(0, 0, 0, .46);
  transform: rotate(-3deg);
  animation: fp-device-float 3.8s var(--fp-ease) infinite alternate;
}
.fp-handset-screen {
  position: relative;
  height: 100%;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 7px;
  overflow: hidden;
  border-radius: 18px;
  background: #0a0a09;
  color: var(--fp-paper);
}
.fp-handset-screen small { position: absolute; top: 11px; left: 13px; font-size: 6px; }
.fp-handset-screen strong { font-family: var(--tobira-font-display); font-size: 15px; }
.fp-handset-speaker {
  position: absolute;
  top: 11px;
  left: 50%;
  z-index: 2;
  width: 34%;
  height: 9px;
  border-radius: 999px;
  background: #171716;
  transform: translateX(-50%);
}
.fp-handset-pill {
  position: absolute;
  bottom: 12px;
  left: 50%;
  z-index: 2;
  width: 30%;
  height: 3px;
  border-radius: 999px;
  background: rgba(242, 239, 233, .48);
  transform: translateX(-50%);
}
.fp-handset-orbit {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--source-accent);
  animation: fp-handset-orbit 3s linear infinite;
}
.fp-browser {
  width: min(76%, 340px);
  height: 66%;
  overflow: hidden;
  border-radius: 12px;
  background: #0b0b0a;
  box-shadow: 15px 18px 52px rgba(0, 0, 0, .42);
  transform: rotate(-2deg);
  animation: fp-device-float 4s var(--fp-ease) infinite alternate;
}
.fp-browser-bar {
  height: 28px;
  display: grid;
  grid-template-columns: 20px 1fr 20px;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  background: #d8d3ca;
  color: #292622;
  font-size: 8px;
  text-align: center;
}
.fp-browser-address {
  min-width: 0;
  padding: 5px 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(9, 9, 9, .08);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fp-browser-page {
  height: calc(100% - 28px);
  display: grid;
  align-content: end;
  gap: 5px;
  padding: 15px;
  background: #0b0b0a;
  box-shadow: inset 0 -8px 0 var(--source-accent);
  color: var(--fp-paper);
}
.fp-browser-page small { font-size: 6px; letter-spacing: .12em; }
.fp-browser-page strong { font-family: var(--tobira-font-display); font-size: 18px; }
.fp-image-compare {
  position: relative;
  width: min(74%, 330px);
  height: 64%;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 22px 58px rgba(0, 0, 0, .38);
}
.fp-compare-side {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.fp-compare-side .fp-local-plate {
  width: 100%;
  height: 100%;
}
.fp-compare-after {
  clip-path: inset(0 0 0 50%);
  animation: fp-compare-reveal 3.6s var(--fp-ease) infinite alternate;
}
.fp-compare-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--fp-paper);
  box-shadow: 0 0 0 5px rgba(0, 0, 0, .24);
  animation: fp-compare-handle 3.6s var(--fp-ease) infinite alternate;
}
.fp-ascii {
  margin: 0;
  color: var(--source-accent);
  font-family: var(--tobira-font-code);
  font-size: min(clamp(7px, 1.4vw, 17px), 5cqi);
  line-height: 1.05;
  white-space: pre;
  animation: fp-ascii-glitch 2.8s steps(1) infinite;
}
.fp-player {
  width: min(70%, 280px);
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 5px 13px;
  padding: 14px;
  border-radius: 15px;
  background: rgba(242, 239, 233, .1);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .32);
  color: var(--fp-paper);
  backdrop-filter: blur(14px);
}
.fp-player-art {
  grid-row: 1 / span 4;
  border-radius: 10px;
  background: conic-gradient(
    var(--source-accent) 0 25%,
    #111 25% 50%,
    var(--fp-paper) 50% 75%,
    #111 75% 100%
  );
  animation: fp-player-art 8s linear infinite;
}
.fp-player small { font-size: 6px; letter-spacing: .1em; }
.fp-player strong { font-size: 11px; }
.fp-player-wave {
  color: var(--source-accent);
  font-family: var(--tobira-font-code);
  font-size: 9px;
  letter-spacing: .05em;
  animation: fp-player-wave 1.2s steps(4) infinite alternate;
}
.fp-player-controls { font-size: 9px; letter-spacing: .35em; }
.fp-image-field {
  position: absolute;
  inset: -9%;
  overflow: hidden;
  transform: rotate(-4deg);
  animation: fp-image-field-pan 5.6s var(--fp-ease) infinite alternate;
}
.fp-image-field-tile {
  position: absolute;
  top: var(--tile-y);
  left: var(--tile-x);
  width: 24%;
  aspect-ratio: 4 / 3;
  border-radius: 5px;
  box-shadow: 0 15px 32px rgba(0, 0, 0, .42);
  object-fit: cover;
  transform: translate(-50%, -50%);
}
.fp-image-field-cursor {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--fp-paper);
  box-shadow: 0 0 0 8px rgba(242, 239, 233, .14);
}
.fp-image-ripple,
.fp-pixel-image,
.fp-media-frame,
.fp-lens-image {
  position: relative;
  width: min(72%, 320px);
  height: 64%;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 22px 58px rgba(0, 0, 0, .4);
}
.fp-image-ripple > .fp-local-plate,
.fp-pixel-image > .fp-local-plate,
.fp-media-frame > .fp-local-plate,
.fp-lens-image > .fp-local-plate {
  width: 100%;
  height: 100%;
}
.fp-image-wave {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(242, 239, 233, .54);
  animation: fp-image-wave 2.6s ease-out calc(var(--i) * -.4s) infinite;
}
.fp-pixel-image {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(6, 1fr);
}
.fp-pixel-image > .fp-local-plate { position: absolute; inset: 0; }
.fp-pixel-mask {
  position: relative;
  z-index: 2;
  background: #11110f;
  opacity: 1;
  animation: fp-pixel-unmask 3.6s steps(1) calc(var(--i) * -34ms) infinite;
}
.fp-media-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
  background: rgba(242, 239, 233, .88);
  color: #090909;
  transform: translate(-50%, -50%);
  animation: fp-media-play 2.4s ease-in-out infinite;
}
.fp-media-accent {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  height: 8px;
  background: var(--source-accent);
  transform-origin: 0 50%;
  animation: fp-media-accent 2.8s var(--fp-ease) infinite alternate;
}
.fp-media-shade {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
}
@keyframes fp-device-float {
  from { transform: translateY(6px) rotate(-4deg); }
  to { transform: translateY(-5px) rotate(2deg); }
}
@keyframes fp-handset-orbit {
  to { transform: rotate(1turn) scale(.88); }
}
@keyframes fp-compare-reveal {
  from { clip-path: inset(0 0 0 24%); }
  to { clip-path: inset(0 0 0 76%); }
}
@keyframes fp-compare-handle {
  from { transform: translateX(-52px); }
  to { transform: translateX(52px); }
}
@keyframes fp-ascii-glitch {
  0%, 82%, 100% { opacity: 1; transform: none; }
  84% { opacity: .5; transform: translateX(4px) skewX(4deg); }
  88% { opacity: .85; transform: translateX(-3px); }
}
@keyframes fp-player-art {
  to { transform: rotate(1turn); }
}
@keyframes fp-player-wave {
  from { transform: scaleY(.55); }
  to { transform: scaleY(1.15); }
}
@keyframes fp-image-field-pan {
  from { transform: rotate(-4deg) translate3d(-3%, -2%, 0) scale(1.05); }
  to { transform: rotate(-1deg) translate3d(4%, 3%, 0) scale(1.1); }
}
@keyframes fp-image-wave {
  from { opacity: .78; transform: translate(-50%, -50%) scale(.2); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(5.2); }
}
@keyframes fp-pixel-unmask {
  0%, 28% { opacity: 1; }
  32%, 72% { opacity: 0; }
  76%, 100% { opacity: 1; }
}
@keyframes fp-media-play {
  0%, 100% { transform: translate(-50%, -50%) scale(.92); }
  50% { transform: translate(-50%, -50%) scale(1.08); }
}
@keyframes fp-media-accent {
  from { transform: scaleX(.24); }
  to { transform: scaleX(1); }
}

/* Pointer responses, cards, marquees, terminal/data. */
.fp-pointer-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  overflow: hidden;
  perspective: 700px;
}
.fp-pointer-cursor {
  position: absolute;
  z-index: 9;
  width: 0;
  height: 0;
  border-top: 18px solid var(--fp-paper);
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .54));
  transform: rotate(-28deg);
  animation: fp-cursor-travel 3.2s var(--fp-ease) infinite alternate;
}
.fp-eye {
  width: 70px;
  height: 40px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--fp-paper);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .26);
}
.fp-pupil {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #090909;
  box-shadow: inset 0 0 0 5px var(--source-accent);
  animation: fp-eye-follow 3.2s var(--fp-ease) infinite alternate;
}
.fp-particle-word,
.fp-repel-word {
  position: relative;
  z-index: 2;
  color: var(--fp-paper);
  font-family: var(--tobira-font-display);
  font-size: clamp(34px, min(5vw, 13cqi), 84px);
  font-weight: 900;
  letter-spacing: -.08em;
}
.fp-type-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--source-accent);
  animation: fp-type-particle 3s ease-in-out calc(var(--i) * -35ms) infinite alternate;
}
.fp-repel-word { display: flex; }
.fp-repel-word span {
  display: inline-block;
  animation: fp-repel-letter 3s var(--fp-ease) calc(var(--i) * -70ms) infinite alternate;
}
.fp-lens {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: inherit;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .4), inset 0 0 0 2px rgba(242, 239, 233, .72);
  backdrop-filter: brightness(1.2) contrast(1.08);
  transform: translate(-50%, -50%) scale(1.1);
  animation: fp-lens-move 3.2s var(--fp-ease) infinite alternate;
}
.fp-spotlight-card,
.fp-tilt-card {
  position: relative;
  width: min(62%, 250px);
  height: 60%;
  display: grid;
  align-content: end;
  gap: 7px;
  overflow: hidden;
  padding: 17px;
  border-radius: 14px;
  background: #1b1a18;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .38);
  color: var(--fp-paper);
  transform-style: preserve-3d;
}
.fp-spotlight-card small { font-size: 7px; letter-spacing: .11em; }
.fp-spotlight-card strong { font-family: var(--tobira-font-display); font-size: 18px; }
.fp-spotlight {
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 239, 233, .92), transparent 68%);
  filter: blur(9px);
  opacity: .48;
  mix-blend-mode: screen;
  animation: fp-spotlight-follow 3.2s var(--fp-ease) infinite alternate;
}
.fp-tilt-card {
  width: min(54%, 220px);
  padding: 0;
  transform: rotateX(8deg) rotateY(-12deg);
  animation: fp-card-tilt 3.2s var(--fp-ease) infinite alternate;
}
.fp-tilt-card > .fp-local-plate { width: 100%; height: 100%; }
.fp-tilt-card strong {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  font-size: 9px;
  letter-spacing: .1em;
}
.fp-tilt-glare {
  position: absolute;
  inset: -50%;
  background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, .5), transparent 62%);
  transform: translateX(-40%);
  animation: fp-tilt-glare 3.2s ease-in-out infinite;
}
.fp-magnetic-target {
  min-width: 132px;
  min-height: 52px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--source-accent);
  color: #090909;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
  animation: fp-magnetic-target 3.2s var(--fp-ease) infinite alternate;
}
.fp-pointer-path {
  position: absolute;
  width: 48%;
  height: 48%;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(242, 239, 233, .09);
}
.fp-card-stage {
  display: grid;
  place-items: center;
  overflow: hidden;
}
.fp-effect-card,
.fp-note-card {
  position: relative;
  width: min(68%, 280px);
  min-height: 58%;
  display: grid;
  align-content: center;
  gap: 8px;
  overflow: hidden;
  padding: 17px;
  border-radius: 14px;
  background: #e9e4db;
  box-shadow: 0 25px 66px rgba(0, 0, 0, .38);
  color: #090909;
}
.fp-effect-card small { font-size: 7px; letter-spacing: .11em; }
.fp-effect-card strong { font-family: var(--tobira-font-display); font-size: 18px; line-height: 1; }
.fp-effect-card p { margin: 0; color: #5f5a52; font-size: 8px; }
.fp-effect-card > small,
.fp-effect-card > strong,
.fp-effect-card > p { position: relative; z-index: 1; }
.fp-card-trail,
.fp-card-accent {
  position: absolute;
  z-index: 0;
  background: var(--source-accent);
}
.fp-card-trail {
  right: 0;
  bottom: 0;
  left: 0;
  height: 8px;
  transform-origin: 0 50%;
  animation: fp-card-trail 3.2s var(--fp-ease) infinite alternate;
}
.fp-card-accent {
  top: 14px;
  right: 14px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  animation: fp-card-accent 2.8s var(--fp-ease) infinite alternate;
}
.fp-note-card {
  grid-template-columns: 34px 1fr;
  min-height: 64%;
  align-content: start;
}
.fp-note-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  grid-row: 1 / span 2;
  place-items: center;
  border-radius: 50%;
  background: #11110f;
  color: var(--fp-paper);
  font-weight: 900;
}
.fp-note-card strong { align-self: end; font-size: 11px; }
.fp-note-card small { align-self: start; color: #6b665f; font-size: 6px; letter-spacing: .1em; }
.fp-note-card p { grid-column: 1 / -1; margin: 7px 0; color: #46423d; font-size: 9px; line-height: 1.45; }
.fp-note-meta { grid-column: 1 / -1; color: #6b665f; font-size: 8px; letter-spacing: .12em; }
.fp-note-loader {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 28%, rgba(255, 255, 255, .72) 48%, transparent 68%);
  transform: translateX(-100%);
  animation: fp-note-load 2.6s ease-in-out infinite;
}
.fp-calendar {
  width: min(72%, 300px);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 3px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(242, 239, 233, .08);
}
.fp-calendar-day {
  aspect-ratio: 1;
  border-radius: 2px;
  background: rgba(242, 239, 233, .08);
  animation: fp-calendar-pulse 3s ease-in-out calc(var(--i) * -18ms) infinite alternate;
}
.fp-calendar-day:nth-child(5n + 1) { background: var(--source-accent); }
.fp-calendar-day:nth-child(7n + 3) { background: var(--fp-paper); }
.fp-bento {
  width: min(74%, 310px);
  height: 68%;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  grid-template-rows: .9fr 1.1fr;
  gap: 7px;
}
.fp-bento-tile {
  display: grid;
  place-items: end start;
  padding: 12px;
  border-radius: 12px;
  background: var(--fp-paper);
  color: var(--fp-ink);
  animation: fp-bento-enter 3.2s var(--fp-ease) calc(var(--i) * -90ms) infinite alternate;
}
.fp-bento-tile:nth-child(1),
.fp-bento-tile:nth-child(4) { background: var(--source-accent); }
.fp-bento-tile strong { font-size: 9px; }
.fp-avatars { display: flex; }
.fp-avatars span {
  width: 54px;
  height: 54px;
  display: grid;
  margin-left: -12px;
  place-items: center;
  border-radius: 50%;
  background: var(--fp-paper);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
  color: var(--fp-ink);
  font-size: 10px;
  font-weight: 900;
  animation: fp-avatar-rise 2.8s var(--fp-ease) calc(var(--i) * -90ms) infinite alternate;
}
.fp-avatars span:nth-child(odd) { background: var(--source-accent); }
.fp-card-group {
  width: 70%;
  display: flex;
  justify-content: center;
  gap: 7px;
}
.fp-card-group span {
  width: 42px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--fp-paper);
  color: var(--fp-ink);
  font-size: 9px;
  animation: fp-group-enter 3s var(--fp-ease) calc(var(--i) * -90ms) infinite alternate;
}
.fp-card-group span:nth-child(odd) { background: var(--source-accent); }
.fp-marquee-stage {
  display: grid;
  align-content: center;
  gap: 8px;
  overflow: hidden;
  transform: rotate(-4deg) scale(1.06);
}
.fp-marquee-lane {
  width: max-content;
  color: var(--fp-paper);
  font-family: var(--tobira-font-display);
  font-size: min(clamp(11px, 1.7vw, 28px), 9cqi);
  font-weight: 900;
  letter-spacing: -.04em;
  white-space: nowrap;
  animation: fp-marquee-run 10s linear calc(var(--i) * -1.5s) infinite alternate;
}
.fp-marquee-lane:nth-child(2) {
  color: var(--source-accent);
  animation-direction: alternate-reverse;
}
.fp-terminal-stage,
.fp-data-stage {
  display: grid;
  place-items: center;
}
.fp-terminal,
.fp-file-tree,
.fp-code-compare {
  width: min(74%, 320px);
  min-height: 62%;
  overflow: hidden;
  border-radius: 12px;
  background: #080808;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .4);
}
.fp-terminal-top {
  height: 28px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  background: #282724;
  color: #69655f;
  font-size: 7px;
  letter-spacing: .35em;
}
.fp-terminal code {
  display: block;
  padding: 16px;
  color: #d7d2c8;
  font-family: var(--tobira-font-code);
  font-size: 8px;
  line-height: 1.9;
  white-space: pre-line;
}
.fp-terminal-cursor {
  position: absolute;
  bottom: 24%;
  left: 20%;
  width: 7px;
  height: 12px;
  background: var(--source-accent);
  animation: fp-terminal-cursor .8s steps(1) infinite;
}
.fp-file-tree {
  display: grid;
  align-content: center;
  padding: 16px;
}
.fp-tree-row {
  display: flex;
  gap: 8px;
  color: #d7d2c8;
  font-family: var(--tobira-font-code);
  font-size: 8px;
  line-height: 1.8;
  animation: fp-tree-reveal 2.8s var(--fp-ease) calc(var(--i) * -65ms) infinite alternate;
}
.fp-tree-row i { color: var(--source-accent); font-style: normal; white-space: pre; }
.fp-code-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.fp-code-pane {
  position: relative;
  padding: 13px;
  overflow: hidden;
}
.fp-code-pane + .fp-code-pane { box-shadow: -1px 0 0 rgba(242, 239, 233, .1); }
.fp-code-pane small { color: var(--fp-dim); font-size: 6px; letter-spacing: .12em; }
.fp-code-pane code {
  display: block;
  margin-top: 10px;
  color: #d9d4ca;
  font-family: var(--tobira-font-code);
  font-size: 7px;
  line-height: 1.8;
  white-space: pre-line;
}
.fp-code-pane > i {
  position: absolute;
  right: 9px;
  bottom: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9a5b5b;
}
.fp-code-pane > i.is-added { background: var(--source-accent); }
.fp-flight {
  width: min(76%, 330px);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 17px;
  border-radius: 14px;
  background: #ded9d0;
  box-shadow: 0 24px 62px rgba(0, 0, 0, .4);
  color: #090909;
}
.fp-flight > small,
.fp-flight-time {
  grid-column: 1 / -1;
  font-size: 7px;
  letter-spacing: .1em;
}
.fp-flight > strong {
  font-family: var(--tobira-font-code);
  font-size: min(clamp(16px, 4vw, 56px), 9.5cqi);
}
.fp-flight-path {
  color: var(--source-accent);
  font-size: 9px;
  text-align: center;
  white-space: nowrap;
  animation: fp-flight-progress 2.8s steps(8) infinite alternate;
}
.fp-split-flap { display: flex; gap: 5px; }
.fp-flap-cell {
  position: relative;
  width: min(clamp(26px, 5vw, 68px), 14cqi);
  height: min(clamp(38px, 7vw, 92px), 20cqi);
  display: grid;
  overflow: hidden;
  place-items: center;
  border-radius: 6px;
  background:
    linear-gradient(180deg, #2b2a28 49%, #080808 50%);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .36);
  color: var(--fp-paper);
  font-family: var(--tobira-font-code);
  font-size: min(clamp(16px, 3.6vw, 54px), 9cqi);
  animation: fp-flap 3s steps(1) calc(var(--i) * -80ms) infinite;
}
.fp-flap-cell::after {
  content: attr(data-alt);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #181817;
  color: var(--source-accent);
  opacity: 0;
  transform-origin: 50% 0;
  animation: fp-flap-alt 3s steps(1) calc(var(--i) * -80ms) infinite;
}
.fp-event-list {
  width: min(72%, 300px);
  display: grid;
  gap: 7px;
}
.fp-event-row {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border-radius: 10px;
  background: rgba(242, 239, 233, .09);
  color: var(--fp-paper);
  opacity: 0;
  animation: fp-event-enter 4.8s var(--fp-ease) calc(var(--i) * 1.2s) infinite;
}
.fp-event-row span { color: var(--source-accent); }
.fp-event-row strong { font-size: 8px; }
@keyframes fp-cursor-travel {
  from { transform: translate3d(62px, 52px, 0) rotate(-28deg); }
  to { transform: translate3d(-56px, -44px, 0) rotate(-18deg); }
}
@keyframes fp-eye-follow {
  from { transform: translate3d(13px, 7px, 0); }
  to { transform: translate3d(-13px, -6px, 0); }
}
@keyframes fp-type-particle {
  from { opacity: .2; transform: rotate(var(--particle-angle)) translateX(30px) scale(.5); }
  to { opacity: 1; transform: rotate(var(--particle-angle)) translateX(72px) scale(1.2); }
}
@keyframes fp-repel-letter {
  from { transform: translate3d(0, 0, 0) rotate(0); }
  to { transform: translate3d(calc((var(--i) - 2.5) * 12px), calc(abs(var(--i) - 2.5) * -7px), 0) rotate(calc((var(--i) - 2.5) * 4deg)); }
}
@keyframes fp-lens-move {
  from { transform: translate(-78%, -72%) scale(1.1); }
  to { transform: translate(-24%, -28%) scale(1.2); }
}
@keyframes fp-spotlight-follow {
  from { transform: translate3d(-44px, -38px, 0); }
  to { transform: translate3d(108px, 64px, 0); }
}
@keyframes fp-card-tilt {
  from { transform: rotateX(8deg) rotateY(-13deg) translateY(4px); }
  to { transform: rotateX(-6deg) rotateY(11deg) translateY(-4px); }
}
@keyframes fp-tilt-glare {
  from { transform: translateX(-44%) rotate(4deg); }
  to { transform: translateX(44%) rotate(4deg); }
}
@keyframes fp-magnetic-target {
  from { transform: translate3d(-16px, 8px, 0) scale(.94); }
  to { transform: translate3d(18px, -9px, 0) scale(1.04); }
}
@keyframes fp-card-trail {
  from { transform: scaleX(.18); }
  to { transform: scaleX(1); }
}
@keyframes fp-card-accent {
  from { transform: translate3d(-8px, 5px, 0) rotate(-12deg); }
  to { transform: translate3d(3px, -4px, 0) rotate(14deg); }
}
@keyframes fp-note-load {
  0%, 18% { transform: translateX(-100%); }
  72%, 100% { transform: translateX(100%); }
}
@keyframes fp-calendar-pulse {
  from { opacity: .4; transform: scale(.86); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes fp-bento-enter {
  from { transform: translateY(6px) scale(.97); }
  to { transform: none; }
}
@keyframes fp-avatar-rise {
  from { transform: translateY(5px) scale(.92); }
  to { transform: translateY(-5px) scale(1.03); }
}
@keyframes fp-group-enter {
  from { opacity: .22; transform: translateY(18px) scale(.86); }
  to { opacity: 1; transform: none; }
}
@keyframes fp-marquee-run {
  from { transform: translateX(-5%); }
  to { transform: translateX(-44%); }
}
@keyframes fp-terminal-cursor { 50% { opacity: 0; } }
@keyframes fp-tree-reveal {
  from { opacity: .25; transform: translateX(-8px); }
  to { opacity: 1; transform: none; }
}
@keyframes fp-flight-progress {
  from { clip-path: inset(0 82% 0 0); }
  to { clip-path: inset(0); }
}
@keyframes fp-flap {
  0%, 42%, 58%, 100% { transform: rotateX(0); }
  48% { transform: rotateX(-18deg); }
}
@keyframes fp-flap-alt {
  0%, 44% { opacity: 1; transform: rotateX(0); }
  50%, 100% { opacity: 0; transform: rotateX(92deg); }
}
@keyframes fp-event-enter {
  0% { opacity: 0; transform: translateY(20px) scale(.95); }
  10%, 22% { opacity: 1; transform: none; }
  30%, 100% { opacity: 0; transform: translateY(-15px) scale(.98); }
}

/* Maps, orbits, scroll scenes, and keyboard. */
.fp-map-stage,
.fp-scene-stage,
.fp-keyboard-stage {
  display: grid;
  place-items: center;
  overflow: hidden;
}
.fp-dotted-map {
  width: 92%;
  height: 82%;
}
.fp-map-dot { fill: rgba(242, 239, 233, .42); }
.fp-map-marker { fill: var(--source-accent); }
.fp-map-pulse {
  fill: transparent;
  stroke: var(--source-accent);
  stroke-width: .6;
  transform-box: fill-box;
  transform-origin: center;
  animation: fp-map-pulse 1.4s linear var(--pulse-delay) infinite;
}
.fp-map-label {
  fill: rgba(242, 239, 233, .82);
  font-family: var(--tobira-font-body);
  font-size: 3.2px;
  font-weight: 700;
  letter-spacing: .05em;
}
.fp-globe {
  position: relative;
  width: min(52%, 190px);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .26), transparent 24%),
    radial-gradient(circle at center, #4d4a44, #080808 72%);
  box-shadow: inset -18px -14px 34px rgba(0, 0, 0, .5), 0 18px 60px rgba(0, 0, 0, .35);
  animation: fp-globe-turn 8s linear infinite;
}
.fp-globe-latitudes,
.fp-globe-longitudes {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: repeating-linear-gradient(180deg, transparent 0 13px, rgba(242, 239, 233, .16) 14px 15px);
}
.fp-globe-longitudes {
  background: repeating-linear-gradient(90deg, transparent 0 16px, rgba(242, 239, 233, .12) 17px 18px);
  transform: scaleX(.72);
}
.fp-globe-marker {
  position: absolute;
  top: 40%;
  left: 62%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--source-accent);
  box-shadow: 0 0 0 2px var(--fp-paper);
}
.fp-beam-network {
  position: relative;
  width: min(72%, 300px);
  height: 62%;
}
.fp-beam-node {
  position: absolute;
  top: var(--node-y);
  left: var(--node-x);
  z-index: 2;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: #262522;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .34);
  color: var(--fp-paper);
}
.fp-beam-path {
  position: absolute;
  top: var(--beam-y);
  left: var(--beam-x);
  width: 28%;
  height: 2px;
  overflow: hidden;
  background: rgba(242, 239, 233, .12);
  transform: rotate(var(--beam-rotation));
}
.fp-beam-path::after {
  content: "";
  display: block;
  width: 36%;
  height: 100%;
  background: var(--source-accent);
  animation: fp-beam-run 2.2s ease-in-out calc(var(--i) * -.35s) infinite;
}
.fp-icon-cloud {
  position: relative;
  width: min(56%, 200px);
  aspect-ratio: 1;
  transform-style: preserve-3d;
  animation: fp-cloud-spin 12s linear infinite;
}
.fp-icon-cloud span {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: var(--fp-paper);
  color: var(--fp-ink);
  transform: rotate(var(--cloud-angle)) translateX(var(--cloud-radius)) rotate(calc(var(--cloud-angle) * -1));
}
.fp-icon-cloud span:nth-child(odd) { background: var(--source-accent); }
.fp-orbit {
  position: relative;
  width: min(56%, 200px);
  aspect-ratio: 1;
}
.fp-orbit > strong {
  position: absolute;
  inset: 34%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--source-accent);
  color: #090909;
  font-size: 24px;
}
.fp-orbit-ring {
  position: absolute;
  inset: calc(var(--i) * 11%);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(242, 239, 233, .14);
  animation: fp-orbit-spin calc(8s - var(--i) * 1.3s) linear infinite;
}
.fp-orbit-ring span {
  position: absolute;
  top: -10px;
  left: 50%;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: #2b2926;
  color: var(--fp-paper);
  transform: translateX(-50%);
}
.fp-hero-field {
  position: absolute;
  inset: -20%;
  border-radius: 42% 58% 46% 54%;
  background: conic-gradient(
    from 30deg,
    #0b0b0a 0 42%,
    var(--source-accent) 42% 60%,
    var(--fp-paper) 60% 72%,
    #0b0b0a 72% 100%
  );
  animation: fp-hero-field 6s ease-in-out infinite alternate;
}
.fp-hero-kicker,
.fp-hero-title,
.fp-hero-action { position: relative; z-index: 2; }
.fp-hero-kicker { color: var(--fp-dim); font-size: 7px; letter-spacing: .14em; }
.fp-hero-title {
  max-width: 84%;
  color: var(--fp-paper);
  font-family: var(--tobira-font-display);
  font-size: min(clamp(16px, 3.8vw, 66px), 22cqh, 11cqi);
  letter-spacing: -.07em;
  line-height: .9;
  text-align: center;
}
.fp-hero-action {
  min-width: 92px;
  min-height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--fp-paper);
  color: #090909;
  font-size: 7px;
  font-weight: 900;
}
.fp-scene-stage:has(.fp-hero-field) {
  align-content: center;
  gap: 10px;
}
.fp-hero-shape {
  position: absolute;
  top: var(--shape-y);
  left: var(--shape-x);
  width: var(--shape-size);
  aspect-ratio: 1;
  background: rgba(242, 239, 233, .12);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  animation: fp-hero-shape 4.2s ease-in-out calc(var(--i) * -.38s) infinite alternate;
}
.fp-hero-shape:nth-of-type(odd) { background: var(--source-accent); }
.fp-scroll-split {
  width: min(76%, 340px);
  height: 68%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  border-radius: 12px;
  background: #e4ded4;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .4);
  animation: fp-scroll-split 3.6s var(--fp-ease) infinite alternate;
}
.fp-scroll-split-image { width: 100%; height: 100%; }
.fp-scroll-split-copy {
  display: grid;
  align-content: end;
  gap: 7px;
  padding: 14px;
  color: #090909;
}
.fp-scroll-split-copy small { font-size: 6px; letter-spacing: .1em; }
.fp-scroll-split-copy strong { font-family: var(--tobira-font-display); font-size: 17px; line-height: .95; }
.fp-tilted-grid {
  width: 78%;
  height: 76%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  transform: perspective(600px) rotateX(24deg) rotateZ(-8deg) scale(1.04);
  animation: fp-tilted-resolve 4s var(--fp-ease) infinite alternate;
}
.fp-tilted-cell {
  min-width: 0;
  min-height: 0;
  border-radius: 6px;
  animation: fp-tilted-cell 4s var(--fp-ease) calc(var(--i) * -60ms) infinite alternate;
}
.fp-scroll-sequence {
  position: relative;
  width: min(72%, 300px);
  height: 68%;
}
.fp-scroll-frame {
  position: absolute;
  inset: calc(var(--i) * 10px);
  display: grid;
  align-content: end;
  padding: 14px;
  border-radius: 12px;
  background: #191816;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .28);
  color: var(--fp-paper);
  animation: fp-scroll-frame 4.5s var(--fp-ease) calc(var(--i) * 1.5s) infinite;
}
.fp-scroll-frame:nth-child(1) { background: var(--source-accent); color: var(--fp-ink); }
.fp-scroll-frame:nth-child(2) { background: var(--fp-paper); color: var(--fp-ink); }
.fp-scroll-frame strong { font-size: 9px; letter-spacing: .1em; }
.fp-scroll-frame i {
  width: 48%;
  height: 5px;
  margin-top: 9px;
  border-radius: 3px;
  background: rgba(242, 239, 233, .14);
}
.fp-keyboard {
  width: min(78%, 330px);
  display: grid;
  gap: 5px;
  padding: 10px;
  border-radius: 14px;
  background: #d6d2ca;
  box-shadow: 14px 18px 38px rgba(0, 0, 0, .4);
  transform: perspective(580px) rotateX(24deg) rotateZ(-2deg);
}
.fp-key-row { display: flex; gap: 5px; }
.fp-key {
  min-width: 0;
  height: 25px;
  display: grid;
  flex: 1;
  place-items: center;
  border-radius: 4px;
  background: #242321;
  box-shadow: 0 3px 0 #080808;
  color: #d9d5cd;
  font-family: var(--tobira-font-code);
  font-size: 7px;
  animation: fp-key-press 3s ease-in-out calc(var(--i) * -43ms) infinite;
}
.fp-key-row:last-child .fp-key:nth-child(3) { flex: 2.7; }
@keyframes fp-map-pulse {
  from { opacity: .9; transform: scale(1); }
  to { opacity: 0; transform: scale(2.8); }
}
@keyframes fp-globe-turn {
  to { transform: rotateY(1turn); }
}
@keyframes fp-beam-run {
  from { transform: translateX(-100%); }
  to { transform: translateX(300%); }
}
@keyframes fp-cloud-spin {
  to { transform: rotateY(1turn) rotateZ(12deg); }
}
@keyframes fp-orbit-spin {
  to { transform: rotate(1turn); }
}
@keyframes fp-hero-field {
  from { transform: rotate(-8deg) scale(.94); }
  to { transform: rotate(11deg) scale(1.1); }
}
@keyframes fp-hero-shape {
  from { opacity: .2; transform: translate3d(-8px, 12px, 0) rotate(-20deg); }
  to { opacity: .8; transform: translate3d(9px, -10px, 0) rotate(26deg); }
}
@keyframes fp-scroll-split {
  from { grid-template-columns: 1.35fr .65fr; transform: translateY(7px) scale(.97); }
  to { grid-template-columns: .88fr 1.12fr; transform: translateY(-5px) scale(1); }
}
@keyframes fp-tilted-resolve {
  from { transform: perspective(600px) rotateX(28deg) rotateZ(-9deg) scale(1.06); }
  to { transform: perspective(600px) rotateX(4deg) rotateZ(0) scale(1); }
}
@keyframes fp-tilted-cell {
  from { transform: translateY(8px); }
  to { transform: none; }
}
@keyframes fp-scroll-frame {
  0% { opacity: 0; transform: translateY(30px) scale(.96); }
  10%, 25% { opacity: 1; transform: none; }
  34%, 100% { opacity: 0; transform: translateY(-24px) scale(.98); }
}
@keyframes fp-key-press {
  0%, 42%, 58%, 100% { transform: none; box-shadow: 0 3px 0 #080808; }
  48%, 53% { transform: translateY(3px); box-shadow: 0 0 0 #080808; background: var(--source-accent); color: #080808; }
}

/* Preserve the gallery's motion budget for the new preview runtime. */
.faithful-preview,
.faithful-preview *,
.faithful-preview *::before,
.faithful-preview *::after {
  animation-play-state: paused !important;
}
.is-motion-active .faithful-preview,
.is-motion-active .faithful-preview *,
.is-motion-active .faithful-preview *::before,
.is-motion-active .faithful-preview *::after,
.component-detail.is-open:not(.is-swapping) .faithful-preview,
.component-detail.is-open:not(.is-swapping) .faithful-preview *,
.component-detail.is-open:not(.is-swapping) .faithful-preview *::before,
.component-detail.is-open:not(.is-swapping) .faithful-preview *::after {
  animation-play-state: running !important;
}
.is-motion-active .fp-layered-card,
.component-detail.is-open:not(.is-swapping) .fp-layered-card {
  will-change: transform;
}

@media (max-width: 700px) {
  .fp-type-word { font-size: clamp(22px, 8vw, 52px); }
  .fp-layered-card { width: 21%; }
  .fp-dock { right: 6%; left: 6%; }
  .fp-dock-item { width: 34px; height: 34px; flex-basis: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .faithful-preview,
  .faithful-preview *,
  .faithful-preview *::before,
  .faithful-preview *::after {
    animation: none !important;
    scroll-behavior: auto !important;
  }
  .fp-layered-card {
    transform:
      translate3d(calc(-50% + var(--stack-x)), calc(-50% + var(--stack-y)), 0)
      rotate(0)
      scale(1);
  }
  .fp-cycle-word:first-child,
  .fp-transition-panel:first-child,
  .fp-event-row:first-child { opacity: 1; transform: none; }
  .fp-field-layer { opacity: .62; }
  .fp-compare-after { clip-path: inset(0 0 0 50%); }
  .fp-digit-reel { transform: translateY(-33.333%); }
  .fp-system-signature,
  .faithful-preview[data-variant*="reveal"] .fp-type-word {
    clip-path: inset(0);
    filter: none;
  }
  .fp-pixel-mask { opacity: 0; }
  .fp-map-pulse,
  .fp-confetti,
  .fp-note-loader { display: none; }
}