@font-face {
  font-family: 'Bebas Neue';
  src: url('./fonts/bebas-neue-latin-regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root { color-scheme: light; background: var(--scene-background, #0d0d0d); font-family: Arial, Helvetica, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; overscroll-behavior: none; }
html { overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }
::-webkit-scrollbar { display: none; }
.scroll-runway { height: calc(100dvh + var(--scroll-distance, 4000px)); pointer-events: none; }
.scene { position: fixed; inset: 0; width: 100%; height: 100dvh; overflow: hidden; isolation: isolate; background: var(--scene-background, #0d0d0d); transition: background-color var(--theme-duration, 480ms) ease; touch-action: none; outline: none; }
/* One static grid layer blends only with the scene, beneath the card artwork. */
.scene[data-grid-tone="dark"] { --grid-ink: 0 0 0; --grid-blend: multiply; --grid-major-opacity: 7.5%; --grid-minor-opacity: 3.75%; }
.scene[data-color="red"][data-grid-tone="dark"] { --grid-major-opacity: 9%; --grid-minor-opacity: 4.5%; }
.scene::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: var(--grid-blend, screen);
  background-image:
    linear-gradient(to right, rgb(var(--grid-ink, 255 255 255) / var(--grid-major-opacity, 4%)) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(var(--grid-ink, 255 255 255) / var(--grid-major-opacity, 4%)) 1px, transparent 1px),
    linear-gradient(to right, rgb(var(--grid-ink, 255 255 255) / var(--grid-minor-opacity, 2%)) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(var(--grid-ink, 255 255 255) / var(--grid-minor-opacity, 2%)) 1px, transparent 1px);
  background-size: 576px 576px, 576px 576px, 96px 96px, 96px 96px;
  background-position: 0 0;
  transition: opacity 700ms cubic-bezier(.37, 0, .63, 1);
}
.scene[data-intro="waiting"]::before { opacity: 0; }
#carousel { display: block; width: 100%; height: 100%; overflow: hidden; z-index: 1; }
/* Figma 11:64: upright type over the scene, separate from the tilted card. */
.experiment-label {
  position: absolute;
  z-index: 2;
  left: calc(var(--text-left, 8%) + var(--text-offset-x, 0vw));
  top: calc(var(--text-top, 32.3%) + var(--text-offset-y, 0vh));
  margin: 0;
  /* White difference blending inverts each pixel of the artwork below it. */
  color: #fff;
  mix-blend-mode: difference;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: calc(var(--text-size, min(18.3766vw, 34.702vh)) * var(--text-scale, 1));
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  display: flex;
}
.experiment-prefix, .experiment-number { display: flex; }
.scene[data-intro="waiting"] .experiment-label { visibility: hidden; }
.flip-digit {
  position: relative;
  display: block;
  width: 1ch;
  height: 1.2em;
  perspective: 3em;
  text-align: center;
}
.flip-digit-rest, .flip-half > span { display: block; height: 1.2em; }
.flip-half {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  overflow: hidden;
  backface-visibility: hidden;
}
.flip-old-top, .flip-new-top { top: 0; transform-origin: center bottom; }
.flip-old-bottom, .flip-new-bottom { top: 50%; transform-origin: center top; }
.flip-old-bottom > span, .flip-new-bottom > span { transform: translateY(-50%); }
/* Two hinged halves exchange at the fold; opacity stays at 1 throughout. */
.is-flipping .flip-old-top { animation: flip-old-top 520ms both; }
.is-flipping .flip-old-bottom { animation: flip-old-bottom 520ms both; }
.is-flipping .flip-new-top { animation: flip-new-top 520ms both; }
.is-flipping .flip-new-bottom { animation: flip-new-bottom 520ms both; }
@keyframes flip-old-top {
  0% { transform: rotateX(0); animation-timing-function: ease-in; }
  50%, 100% { transform: rotateX(-90deg); }
}
@keyframes flip-old-bottom {
  0%, 49.999% { visibility: visible; }
  50%, 100% { visibility: hidden; }
}
@keyframes flip-new-top {
  0%, 49.999% { visibility: hidden; }
  50%, 100% { visibility: visible; }
}
@keyframes flip-new-bottom {
  0%, 50% { transform: rotateX(90deg); animation-timing-function: ease-out; }
  100% { transform: rotateX(0); }
}
.card-caption { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace; font-weight: 400; }
.scroll-cue { position: fixed; z-index: 2; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); width: 20px; height: 28px; transform: translateX(-50%); color: var(--scene-ink, #fffdf8); pointer-events: none; user-select: none; opacity: 0; transition: opacity 350ms; }
.scene:not([data-intro="waiting"]) ~ .scroll-cue { opacity: 1; }
.scroll-cue svg { display: block; opacity: 0; filter: drop-shadow(0 1px 3px rgb(0 0 0 / .45)); animation: scroll-cue-fade 7.2s ease-in-out infinite; }
@keyframes scroll-cue-fade {
  0%, 20%, 40%, 60%, 100% { opacity: 0; }
  10%, 30%, 50% { opacity: .65; }
}
body.has-interacted .scroll-cue { visibility: hidden; }
.controls { display: flex; position: fixed; right: calc(max(22px, env(safe-area-inset-right)) + 124px); bottom: max(16px, env(safe-area-inset-bottom)); }
/* Hidden until T is pressed (toggleControls in app.js). */
body:not(.show-ui) .controls, body:not(.show-ui) .motion-settings { display: none; }
.controls button { width: 44px; height: 44px; padding: 12px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--scene-ink, #fffdf8); cursor: pointer; }
.controls button:hover { background: color-mix(in srgb, var(--scene-ink, #fffdf8) 10%, transparent); }
.controls button:focus-visible { outline: 2px solid var(--scene-ink, #fffdf8); outline-offset: 3px; }
.controls svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.motion-settings { position: fixed; z-index: 5; right: max(22px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); color: #171717; font-size: 13px; }
.motion-settings button, .motion-settings input, .motion-settings select { font: inherit; }
.motion-settings button { color: inherit; cursor: pointer; }
.motion-toggle { width: 112px; height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #d4d4d4; border-radius: 24px; background: #f9f9f9; box-shadow: 0 2px 6px #00000004; }
.motion-toggle:hover, .motion-toggle[aria-expanded="true"] { border-color: #aaa; background: #fff; }
.motion-settings svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.motion-settings :focus-visible { outline: 2px solid #171717; outline-offset: 4px; }
.motion-panel { position: absolute; right: 0; bottom: 56px; width: 292px; max-height: calc(100dvh - 96px); overflow-y: auto; overscroll-behavior: contain; padding: 20px; border: 1px solid #d8d8d8; border-radius: 16px; background: #fafafa; box-shadow: 0 8px 32px #0000000c; }
.motion-panel[hidden] { display: none; }
.motion-panel { translate: var(--panel-x, 0) var(--panel-y, 0); }
.motion-panel[data-dragging] { box-shadow: 0 16px 48px #0000001f; user-select: none; }
.motion-panel-heading { display: flex; align-items: center; gap: 6px; margin: -8px -8px 16px; padding: 8px; border-radius: 10px; cursor: grab; touch-action: none; user-select: none; }
.motion-panel[data-dragging] .motion-panel-heading { cursor: grabbing; }
.motion-panel-heading h2 { flex: 1; }
.motion-grip { display: grid; place-items: center; width: 24px; height: 28px; margin-left: -6px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #8a8a8a !important; cursor: inherit !important; }
.motion-grip:hover { background: #e9e9e9; color: #171717 !important; }
.motion-settings .motion-grip:focus-visible { outline-offset: 0; }
.motion-settings .motion-grip svg { fill: currentColor; stroke: none; }
.motion-panel h2 { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: -.02em; }
.motion-close { display: grid; place-items: center; width: 28px; height: 28px; margin: -5px -5px -5px 0; padding: 0; border: 0; border-radius: 50%; background: transparent; }
.motion-close:hover { background: #e9e9e9; }
.motion-speed-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.motion-speed-label output { font-variant-numeric: tabular-nums; font-size: 12px; }
.motion-settings input[type="range"] { display: block; width: 100%; height: 20px; margin: 0; padding: 0; appearance: none; background: transparent; cursor: pointer; accent-color: #171717; }
.motion-settings input[type="range"]::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: #d7d7d7; }
.motion-settings input[type="range"]::-moz-range-track { height: 3px; border-radius: 3px; background: #d7d7d7; }
.motion-settings input[type="range"]::-webkit-slider-thumb { width: 15px; height: 15px; margin-top: -6px; appearance: none; border: 0; border-radius: 50%; background: #171717; }
.motion-settings input[type="range"]::-moz-range-thumb { width: 15px; height: 15px; border: 0; border-radius: 50%; background: #171717; }
.motion-settings input[type="range"]:disabled { cursor: default; }
.motion-speed-scale { display: flex; justify-content: space-between; margin-top: 5px; color: #818181; font-size: 10px; }
.motion-duration { margin: 14px 0 22px; color: #727272; font-size: 11px; font-variant-numeric: tabular-nums; }
.motion-easing-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.motion-color-timing-row { margin-bottom: 22px; }
#motion-easing { width: 180px; min-width: 0; height: 34px; padding: 0 9px; border: 1px solid #d8d8d8; border-radius: 7px; background: #fff; color: #171717; font-size: 12px; cursor: pointer; }
#motion-easing:hover { border-color: #aaa; }
.easing-preview { margin: 0 0 22px; padding: 9px 0 3px; border: 1px solid #e4e4e4; border-radius: 9px; background: #f4f4f4; }
.easing-preview figcaption { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px 3px; color: #686868; font-size: 10px; }
#easing-preview-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#easing-replay { display: flex; flex: none; align-items: center; gap: 3px; padding: 4px 0 4px 4px; border: 0; border-radius: 3px; background: transparent; font-size: 10px; }
#easing-replay:hover { color: #000; }
#easing-replay:disabled { color: #aaa; cursor: default; }
#easing-replay svg { width: 12px; height: 12px; stroke-width: 1.5; }
.motion-settings .easing-preview-graph { display: block; width: 100%; height: 104px; overflow: visible; }
.easing-baseline { stroke: #c7c7c7; stroke-width: 1; stroke-dasharray: 3 4; }
.easing-curve { stroke: #171717; stroke-width: 1.7; }
.easing-endpoint { fill: #f4f4f4; stroke: #171717; stroke-width: 1; }
.easing-marker { fill: #171717; stroke: #f4f4f4; stroke-width: 1.5; }
.easing-track { stroke: #d7d7d7; stroke-width: 1.5; }
.easing-track-ticks { stroke: #b5b5b5; stroke-width: 1; }
.easing-position { fill: #171717; stroke: #f4f4f4; stroke-width: 1.5; }
.motion-float-row { position: relative; display: flex; align-items: center; justify-content: space-between; padding-top: 17px; border-top: 1px solid #e4e4e4; cursor: pointer; }
#motion-float { position: absolute; right: 0; bottom: 0; width: 32px; height: 20px; margin: 0; opacity: 0; }
.motion-switch { position: relative; width: 32px; height: 20px; border-radius: 12px; background: #d4d4d4; pointer-events: none; }
.motion-switch::after { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; content: ''; }
#motion-float:checked + .motion-switch { background: #171717; }
#motion-float:checked + .motion-switch::after { transform: translateX(12px); }
#motion-float:focus-visible + .motion-switch { outline: 2px solid #171717; outline-offset: 4px; }
#motion-float:disabled + .motion-switch { opacity: .4; }
.motion-amount-row { margin-top: 22px; }
.motion-amount-row[data-disabled="true"] { opacity: .4; }
.motion-reduced-note { margin: 12px 0 0; color: #777; font-size: 11px; line-height: 1.5; }
.settings-tabs { display: flex; gap: 4px; margin: -7px 0 22px; padding: 3px; border: 1px solid #e4e4e4; border-radius: 9px; background: #efefef; }
.settings-tabs button { flex: 1; height: 30px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: #727272; font-size: 12px; }
.settings-tabs button[aria-selected="true"] { background: #fff; color: #171717; box-shadow: 0 1px 3px #0000000a; }
.settings-tabs button:hover { color: #171717; }
.motion-panel [role="tabpanel"][hidden] { display: none; }
.appearance-field { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.appearance-field select { width: 148px; min-width: 0; height: 34px; padding: 0 9px; border: 1px solid #d8d8d8; border-radius: 7px; background: #fff; color: #171717; font-size: 12px; cursor: pointer; }
.appearance-field select:hover { border-color: #aaa; }
.appearance-color-field { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.appearance-color-input { display: flex; align-items: center; gap: 8px; }
.appearance-color-input input[type="color"] { display: block; width: 28px; height: 28px; padding: 2px; border: 1px solid #d8d8d8; border-radius: 7px; background: #fff; cursor: pointer; }
.appearance-color-input input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.appearance-color-input input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 4px; }
.appearance-color-input input[type="color"]::-moz-color-swatch { border: 0; border-radius: 4px; }
.appearance-color-input input[type="color"]:disabled { cursor: default; opacity: .5; }
.appearance-color-input input[type="text"] { width: 76px; height: 28px; padding: 0 3px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: #777; font-family: 'SFMono-Regular', Consolas, monospace; font-size: 10px; }
.appearance-color-input input[type="text"]:hover:not(:disabled), .appearance-color-input input[type="text"]:focus { border-color: #d8d8d8; background: #fff; }
.appearance-color-input input[type="text"]:disabled { opacity: .5; }
.appearance-presets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin: 12px 0 22px; }
.appearance-presets button { display: flex; flex: 1; align-items: center; justify-content: center; gap: 6px; height: 31px; padding: 0 7px; border: 1px solid #dedede; border-radius: 7px; background: #fff; font-size: 11px; }
.appearance-presets button[aria-pressed="true"] { border-color: #171717; }
.appearance-presets button:hover { background: #f0f0f0; }
.appearance-presets span { width: 10px; height: 10px; border-radius: 50%; background: var(--swatch); }
.appearance-background { padding: 18px 0; border-top: 1px solid #e4e4e4; border-bottom: 1px solid #e4e4e4; }
.appearance-match { display: flex; align-items: center; gap: 8px; margin-top: 13px; color: #666; font-size: 11px; cursor: pointer; }
.appearance-match input { width: 14px; height: 14px; margin: 0; accent-color: #171717; cursor: pointer; }
.appearance-reset { width: 100%; height: 33px; margin-top: 18px; padding: 0 10px; border: 1px solid #d8d8d8; border-radius: 7px; background: transparent; font-size: 12px; }
.appearance-reset:hover { background: #efefef; }
.settings-copy { display: block; width: 100%; margin-top: 16px; padding: 12px 0 0; border: 0; border-top: 1px solid #e4e4e4; background: transparent; color: #6b6b6b !important; font-size: 12px !important; text-align: center; }
.settings-copy:hover { color: #171717 !important; }
.layout-help { margin: -4px 0 14px; color: #727272; font-size: 11px; line-height: 1.5; }
.layout-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.layout-group + .layout-group { margin-top: 4px; padding-top: 10px; border-top: 1px solid #e4e4e4; }
.layout-group legend { margin: 0 0 8px; padding: 0; font-size: 12px; font-weight: 600; }
.layout-field { margin-bottom: 12px; }
.layout-field-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 3px; }
.layout-number { display: flex; align-items: center; gap: 3px; color: #727272; font-size: 11px; }
.layout-number input { width: 68px; height: 24px; padding: 2px 5px; border: 1px solid #d8d8d8; border-radius: 5px; background: #fff; color: #171717; text-align: right; font-variant-numeric: tabular-nums; }
#layout-content .motion-speed-scale { display: none; }
#layout-reset { margin-top: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 640px) { .scroll-cue { bottom: 76px; } .motion-panel { width: min(292px, calc(100vw - 44px)); } }
@media (prefers-reduced-motion: reduce) {
  .controls, .scene, .scene::before, .scroll-cue { transition: none; }
  .scroll-cue svg { animation: none; opacity: .55; }
  .flip-half { animation-duration: 1ms !important; }
}