:root {
  --ink: #11100f;
  --paper: #fbfaf6;
  --paper-deep: #f0ede6;
  --grid: rgba(255, 94, 137, .13);
  --pink: #ff5e88;
  --pink-soft: #ffdce7;
  --yellow: #f5df54;
  --blue: #57a9c9;
  --line: #24211f;
  --muted: #736e68;
  --shadow: 5px 5px 0 var(--ink);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
  min-width: 320px;
}

button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }

.skip-link {
  position: fixed;
  left: 12px;
  top: -80px;
  z-index: 1000;
  padding: 10px 14px;
  color: white;
  background: var(--ink);
}
.skip-link:focus { top: 12px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.paper-shell { min-height: 100vh; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 50;
  width: 214px;
  padding: 22px 18px;
  background: rgba(251, 250, 246, .96);
  border-right: 2px solid var(--ink);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
}

.brand {
  color: inherit;
  text-decoration: none;
  border: 2px solid var(--ink);
  padding: 15px 16px 17px;
  position: relative;
  background: white;
  box-shadow: 4px 4px 0 var(--pink);
}

.brand-kicker,
.eyebrow,
.dialog-label {
  font: 700 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .16em;
}

.brand-mark {
  display: block;
  margin-top: 8px;
  font: 900 25px/1.02 "Arial Black", "Hiragino Kaku Gothic ProN", sans-serif;
  letter-spacing: -.06em;
}

.brand-dot {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--pink);
  border: 2px solid var(--ink);
}

.side-nav { margin-top: 30px; display: grid; gap: 8px; }
.side-link {
  min-height: 48px;
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  color: inherit;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
  border: 1.5px solid transparent;
}
.side-link:hover { background: var(--pink-soft); }
.side-link.is-active { border-color: var(--ink); background: var(--ink); color: white; }
.side-icon { font-size: 19px; text-align: center; }
.side-count {
  min-width: 26px;
  padding: 3px 6px;
  text-align: center;
  border: 1px solid currentColor;
  font: 700 10px/1 ui-monospace, monospace;
}

.save-pocket {
  margin: auto 4px 22px;
  position: relative;
  padding: 28px 14px 16px;
  border: 2px solid var(--ink);
  background: var(--yellow);
  transform: rotate(-1.5deg);
  box-shadow: 4px 4px 0 rgba(17, 16, 15, .16);
}
.save-pocket .tape {
  position: absolute;
  width: 76px;
  height: 21px;
  top: -11px;
  left: 50%;
  transform: translateX(-50%) rotate(2deg);
  background: rgba(255,255,255,.66);
  border-left: 1px solid rgba(17,16,15,.25);
  border-right: 1px solid rgba(17,16,15,.25);
}
.save-pocket p { margin: 0 0 7px; font: 900 24px/1 "Arial Black", sans-serif; }
.save-pocket > span:last-child { font-size: 11px; font-weight: 700; line-height: 1.65; }
.side-note { margin: 0; font-size: 9px; line-height: 1.7; color: var(--muted); }

.page { margin-left: 214px; min-height: 100vh; padding: 0 34px; }
.top-rule { height: 22px; margin: 0 -34px; background: var(--ink); }

.masthead {
  min-height: 238px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 38px 1vw 28px;
  border-bottom: 2px solid var(--ink);
}
.eyebrow { margin: 0 0 14px; }
.masthead h1 {
  margin: 0;
  font: 900 clamp(42px, 6.4vw, 88px)/.88 "Arial Black", "Hiragino Kaku Gothic ProN", sans-serif;
  letter-spacing: -.075em;
}
.masthead h1 span { -webkit-text-stroke: 1.5px var(--ink); color: transparent; }
.masthead-note { min-width: 220px; text-align: right; align-self: flex-end; }
.masthead-note p { font-size: 12px; font-weight: 700; line-height: 1.8; }
.scribble {
  display: inline-block;
  transform: rotate(-8deg);
  font-family: "Yu Mincho", serif;
  font-weight: 800;
  font-size: 18px;
  border-bottom: 2px solid var(--pink);
}

main { padding: 28px 0 72px; }

.category-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 0 10px;
  scrollbar-width: thin;
}
.category-tab {
  border: 2px solid var(--ink);
  background: white;
  padding: 12px 17px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}
.category-tab:hover { background: var(--pink-soft); }
.category-tab[aria-selected="true"] { background: var(--ink); color: white; box-shadow: 3px 3px 0 var(--pink); }

.toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding: 14px;
  border: 2px solid var(--ink);
  background: rgba(255,255,255,.84);
}
.search-box {
  width: min(460px, 100%);
  height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 1.5px solid var(--ink);
  background: white;
}
.search-box > span { font: 900 25px/1 serif; transform: rotate(-15deg); }
.search-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 13px; }
.search-box kbd { padding: 4px 6px; border: 1px solid #aaa49e; color: var(--muted); background: var(--paper-deep); font-size: 9px; }
.filter-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.filter-chip {
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: white;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.filter-chip:hover { transform: translateY(-1px); }
.filter-chip.is-active { background: var(--pink); color: white; }

.result-bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 18px 2px 12px;
  gap: 20px;
}
.result-bar p { margin: 0; font-size: 11px; color: var(--muted); }
.result-bar strong { font: 900 27px/1 "Arial Black", sans-serif; color: var(--ink); }
.result-bar span { font: 700 10px/1 ui-monospace, monospace; letter-spacing: .09em; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  gap: 14px;
}
.motion-card {
  position: relative;
  min-width: 0;
  aspect-ratio: .94;
  border: 1.5px solid var(--ink);
  background: rgba(255,255,255,.92);
  box-shadow: 0 0 0 transparent;
  transition: transform .16s ease, box-shadow .16s ease;
  cursor: pointer;
  overflow: hidden;
}
.motion-card:hover,
.motion-card:focus-within { transform: translate(-3px, -3px); box-shadow: 5px 5px 0 var(--ink); z-index: 2; }
.motion-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 4px;
  background: var(--card-accent, var(--pink));
}
.card-save {
  position: absolute;
  left: 7px;
  top: 7px;
  z-index: 5;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1.5px solid var(--ink);
  background: white;
  display: grid;
  place-items: center;
  font-size: 16px;
  cursor: pointer;
}
.card-save:hover, .card-save.is-saved { background: var(--yellow); }
.card-id {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 4;
  font: 700 9px/1 ui-monospace, monospace;
  color: var(--muted);
}
.preview {
  position: relative;
  height: calc(100% - 58px);
  display: grid;
  place-items: center;
  overflow: hidden;
  background-color: #fff;
  background-image:
    linear-gradient(rgba(17,16,15,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,16,15,.055) 1px, transparent 1px);
  background-size: 16px 16px;
  border-bottom: 1.5px solid var(--ink);
}
.card-info { height: 58px; padding: 9px 10px 8px; }
.card-info p { margin: 0; font-size: 12px; line-height: 1.35; font-weight: 900; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.category-dot { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--card-accent, var(--pink)); }

.motion-scene {
  --duration: .6s;
  width: 100%;
  height: 100%;
  position: relative;
  display: grid;
  place-items: center;
  perspective: 500px;
  isolation: isolate;
}
.motion-text {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .02em;
  max-width: 86%;
  color: var(--ink);
  font: 900 clamp(22px, 2vw, 31px)/1 "Arial Black", "Hiragino Kaku Gothic ProN", sans-serif;
  letter-spacing: -.08em;
  white-space: nowrap;
  transform-origin: center;
}
.motion-text span { display: inline-block; }
.motion-decor { position: absolute; z-index: 1; pointer-events: none; }
.preview:not(.is-playing) .motion-text,
.preview:not(.is-playing) .motion-decor { animation: none !important; }

/* 出現 */
.is-playing .m-fade-in .motion-text { animation: fade-in var(--duration) ease both; }
.is-playing .m-float-up .motion-text { animation: float-up var(--duration) cubic-bezier(.2,.8,.2,1) both; }
.is-playing .m-drop-soft .motion-text { animation: drop-soft var(--duration) ease-out both; }
.is-playing .m-slide-left .motion-text { animation: slide-left var(--duration) cubic-bezier(.2,.9,.2,1) both; }
.is-playing .m-slide-right .motion-text { animation: slide-right var(--duration) cubic-bezier(.2,.9,.2,1) both; }
.is-playing .m-rise-big .motion-text { animation: rise-big var(--duration) cubic-bezier(.1,.85,.2,1) both; }
.is-playing .m-fall-big .motion-text { animation: fall-big var(--duration) cubic-bezier(.2,.8,.25,1) both; }
.is-playing .m-chars-fade .motion-text span { animation: fade-in .32s ease both; animation-delay: calc(var(--i) * .08s); }
.is-playing .m-chars-slide .motion-text span { animation: char-slide .34s ease-out both; animation-delay: calc(var(--i) * .08s); }
.is-playing .m-chars-bounce .motion-text span { animation: char-bounce .48s cubic-bezier(.2,.9,.3,1.4) both; animation-delay: calc(var(--i) * .09s); }
.is-playing .m-type-cursor .motion-text span,
.is-playing .m-type-simple .motion-text span { animation: type-char .01s step-end both; animation-delay: calc(var(--i) * .16s); }
.m-type-cursor .motion-text::after { content: "│"; margin-left: 2px; color: var(--pink); }
.is-playing .m-type-cursor .motion-text::after { animation: blink-cursor .48s steps(1) infinite; }
.is-playing .m-word-fade .motion-text span { animation: word-fade .4s ease both; animation-delay: calc(var(--i) * .18s); }
.is-playing .m-word-scale .motion-text span { animation: word-scale .45s ease-out both; animation-delay: calc(var(--i) * .18s); }
.is-playing .m-zoom-down .motion-text { animation: zoom-down var(--duration) cubic-bezier(.18,.78,.3,1) both; }
.is-playing .m-zoom-up .motion-text { animation: zoom-up var(--duration) ease-out both; }
.is-playing .m-pop-in .motion-text { animation: pop-in var(--duration) cubic-bezier(.2,.9,.3,1.35) both; }
.is-playing .m-bounce-in .motion-text { animation: bounce-in var(--duration) ease-out both; }
.is-playing .m-elastic-in .motion-text { animation: elastic-in var(--duration) ease-out both; }
.is-playing .m-flip-y .motion-text { animation: flip-y var(--duration) ease-out both; }
.is-playing .m-flip-x .motion-text { animation: flip-x var(--duration) ease-out both; }
.is-playing .m-flip-3d .motion-text { animation: flip-3d var(--duration) ease-out both; backface-visibility: hidden; }
.is-playing .m-blur-in .motion-text { animation: blur-in var(--duration) ease-out both; }
.is-playing .m-scale-blur .motion-text { animation: scale-blur var(--duration) ease-out both; }
.is-playing .m-spin-in .motion-text { animation: spin-in var(--duration) ease-out both; }
.is-playing .m-drop-bounce .motion-text { animation: drop-bounce var(--duration) ease-out both; }
.is-playing .m-spring-in .motion-text { animation: spring-in var(--duration) cubic-bezier(.2,1.3,.4,1) both; }
.is-playing .m-diagonal .motion-text { animation: diagonal var(--duration) ease-out both; }
.m-curtain-open .motion-decor { inset: 23% 13%; z-index: 4; background: var(--pink); transform-origin: center; }
.is-playing .m-curtain-open .motion-decor { animation: curtain-open var(--duration) ease-in-out both; }
.is-playing .m-stretch-x .motion-text { animation: stretch-x var(--duration) ease-out both; }
.is-playing .m-wipe-up .motion-text { animation: wipe-up var(--duration) ease-out both; }
.is-playing .m-wipe-right .motion-text { animation: wipe-right var(--duration) ease-out both; }
.is-playing .m-circle-reveal .motion-text { animation: circle-reveal var(--duration) ease-out both; }
.is-playing .m-zigzag-in .motion-text { animation: zigzag-in var(--duration) ease-out both; }
.is-playing .m-pendulum-in .motion-text { transform-origin: 50% -30px; animation: pendulum-in var(--duration) ease-out both; }
.is-playing .m-shuffle .motion-text { animation: shuffle var(--duration) steps(6) both; }
.is-playing .m-glitch-in .motion-text { animation: glitch-in var(--duration) steps(2) both; text-shadow: -3px 0 #00bde8, 3px 0 var(--pink); }
.m-particles .motion-decor::before,
.m-particles .motion-decor::after { content: "✦  ·  ✧"; position: absolute; white-space: nowrap; color: var(--pink); }
.m-particles .motion-decor::before { right: 8px; bottom: 6px; }
.m-particles .motion-decor::after { left: 5px; top: 4px; color: var(--blue); }
.is-playing .m-particles .motion-decor { inset: 22%; animation: particles-in var(--duration) ease-out both; }
.is-playing .m-ink-in .motion-text { animation: ink-in var(--duration) ease-out both; }
.m-shadow-lead .motion-text { text-shadow: 7px 7px 0 var(--pink); }
.is-playing .m-shadow-lead .motion-text { animation: shadow-lead var(--duration) ease-out both; }

/* 強調 */
.is-playing .m-bounce-loop .motion-text { animation: bounce-loop var(--duration) ease-in-out infinite; }
.is-playing .m-breathe .motion-text { animation: breathe var(--duration) ease-in-out infinite; }
.is-playing .m-shake .motion-text { animation: shake var(--duration) steps(2) infinite; }
.is-playing .m-sway .motion-text { animation: sway var(--duration) ease-in-out infinite; }
.is-playing .m-rainbow .motion-text { animation: rainbow var(--duration) linear infinite; }
.is-playing .m-blink .motion-text { animation: blink var(--duration) steps(1) infinite; }
.is-playing .m-outline-glow .motion-text { -webkit-text-stroke: 1px var(--pink); animation: outline-glow var(--duration) ease-in-out infinite; }
.m-shine .motion-text { overflow: hidden; background: linear-gradient(110deg, var(--ink) 30%, white 47%, var(--ink) 62%); background-size: 250% 100%; color: transparent; background-clip: text; -webkit-background-clip: text; }
.is-playing .m-shine .motion-text { animation: shine var(--duration) linear infinite; }
.is-playing .m-neon .motion-text { animation: neon var(--duration) steps(1) infinite; color: white; -webkit-text-stroke: 1px var(--ink); }
.is-playing .m-shadow-pulse .motion-text { animation: shadow-pulse var(--duration) ease-in-out infinite; }
.is-playing .m-chars-jump .motion-text span { animation: char-jump .55s ease-in-out infinite; animation-delay: calc(var(--i) * .12s); }
.m-karaoke .motion-text { color: transparent; -webkit-text-stroke: 1px var(--ink); background: linear-gradient(90deg, var(--pink) 50%, transparent 50%); background-size: 210% 100%; background-clip: text; -webkit-background-clip: text; }
.is-playing .m-karaoke .motion-text { animation: karaoke var(--duration) linear infinite; }
.m-marker .motion-decor { width: 74%; height: 28%; background: var(--yellow); transform: skew(-8deg); }
.is-playing .m-marker .motion-decor { animation: line-grow var(--duration) ease-in-out infinite; transform-origin: left; }
.m-underline .motion-decor { top: 65%; width: 64%; height: 5px; background: var(--pink); }
.is-playing .m-underline .motion-decor { animation: line-grow var(--duration) ease-in-out infinite; transform-origin: left; }
.m-underline-wave .motion-decor { top: 67%; width: 68%; height: 7px; background: radial-gradient(circle at 5px -1px, transparent 5px, var(--blue) 6px, transparent 7px) 0 0/12px 8px repeat-x; }
.is-playing .m-underline-wave .motion-decor { animation: wave-line var(--duration) linear infinite; }
.m-double-line .motion-decor { top: 66%; width: 66%; height: 10px; border-top: 3px solid var(--pink); border-bottom: 3px solid var(--blue); }
.is-playing .m-double-line .motion-decor { animation: double-line var(--duration) steps(1) infinite; }
.m-draw-box .motion-decor,
.m-box-blink .motion-decor { inset: 27% 14%; border: 3px solid var(--pink); }
.is-playing .m-draw-box .motion-decor { animation: draw-box var(--duration) ease-in-out infinite; }
.is-playing .m-box-blink .motion-decor { animation: blink var(--duration) steps(1) infinite; }
.m-bubble .motion-decor { width: 78%; height: 45%; border: 2px solid var(--ink); border-radius: 50%; background: var(--pink-soft); }
.is-playing .m-bubble .motion-decor { animation: breathe var(--duration) ease-in-out infinite; }
.m-orbit .motion-decor { width: 70%; height: 45%; border: 1px dashed #aaa; border-radius: 50%; }
.m-orbit .motion-decor::after { content: "✦"; position: absolute; left: 0; top: 50%; color: var(--pink); }
.is-playing .m-orbit .motion-decor { animation: spin 2s linear infinite; }
.m-sparkle .motion-decor { inset: 17%; background-image: radial-gradient(circle, var(--pink) 0 2px, transparent 3px), radial-gradient(circle, var(--blue) 0 2px, transparent 3px); background-size: 32px 24px, 24px 32px; }
.is-playing .m-sparkle .motion-decor { animation: sparkle .8s steps(2) infinite; }
.is-playing .m-attention-once .motion-text { animation: attention var(--duration) ease-out both; }
.is-playing .m-pulse .motion-text { animation: pulse var(--duration) ease-in-out infinite; }
.is-playing .m-metronome .motion-text { animation: metronome var(--duration) ease-in-out infinite; }
.is-playing .m-shadow-color .motion-text { animation: shadow-color var(--duration) steps(1) infinite; }

/* 退出 */
.is-playing .m-fade-out .motion-text { animation: fade-out var(--duration) ease both; }
.is-playing .m-exit-up .motion-text { animation: exit-up var(--duration) ease-in both; }
.is-playing .m-exit-down .motion-text { animation: exit-down var(--duration) ease-in both; }
.is-playing .m-split-out .motion-text span:nth-child(-n+3) { animation: split-left var(--duration) ease-in both; }
.is-playing .m-split-out .motion-text span:nth-child(n+4) { animation: split-right var(--duration) ease-in both; }
.is-playing .m-shrink-out .motion-text { animation: shrink-out var(--duration) ease-in both; }
.is-playing .m-burst-out .motion-text { animation: burst-out var(--duration) ease-in both; }
.is-playing .m-blur-out .motion-text { animation: blur-out var(--duration) ease-in both; }
.is-playing .m-chars-out .motion-text span { animation: fade-out .25s ease both; animation-delay: calc(var(--i) * .08s); }
.is-playing .m-chars-out-reverse .motion-text span { animation: fade-out .25s ease both; animation-delay: calc(var(--reverse-i) * .08s); }
.is-playing .m-wipe-hide .motion-text { animation: wipe-hide var(--duration) ease-in both; }
.is-playing .m-shatter .motion-text span { animation: shatter var(--duration) ease-in both; animation-delay: calc(var(--i) * .04s); }
.is-playing .m-melt .motion-text { animation: melt var(--duration) ease-in both; }
.is-playing .m-flash-out .motion-text { animation: flash-out var(--duration) ease-out both; }
.is-playing .m-spin-out .motion-text { animation: spin-out var(--duration) ease-in both; }
.is-playing .m-curtain-close .motion-text { animation: curtain-close var(--duration) ease-in both; }

/* 背景・装飾 */
.m-bg-bar .motion-decor { width: 78%; height: 34%; background: var(--pink); }
.is-playing .m-bg-bar .motion-decor { animation: slide-left var(--duration) ease-out both; }
.m-bg-clamp .motion-decor { width: 76%; height: 50%; border-top: 11px solid var(--yellow); border-bottom: 11px solid var(--yellow); }
.is-playing .m-bg-clamp .motion-decor { animation: clamp-in var(--duration) ease-out both; }
.m-knockout .motion-decor { width: 76%; height: 50%; background: var(--ink); }
.m-knockout .motion-text { color: white; mix-blend-mode: normal; }
.is-playing .m-knockout .motion-decor { animation: stretch-x var(--duration) ease-out both; }
.m-gradient-flow .motion-decor { width: 82%; height: 48%; background: linear-gradient(90deg, var(--pink), var(--yellow), var(--blue), var(--pink)); background-size: 300% 100%; }
.is-playing .m-gradient-flow .motion-decor { animation: gradient-flow var(--duration) linear infinite; }
.m-glass-panel .motion-decor { width: 82%; height: 55%; border: 1px solid white; border-radius: 12px; background: rgba(87,169,201,.19); box-shadow: 0 8px 20px rgba(17,16,15,.12); }
.is-playing .m-glass-panel .motion-decor { animation: float-up var(--duration) ease-out both; }
.m-hand-circle .motion-decor { width: 75%; height: 55%; border: 3px solid var(--pink); border-radius: 49% 55% 46% 52%; transform: rotate(-4deg); }
.is-playing .m-hand-circle .motion-decor { animation: circle-reveal var(--duration) ease-out both; }
.m-arrow .motion-decor::before { content: "↘"; font: 900 45px/1 serif; color: var(--pink); }
.is-playing .m-arrow .motion-decor { left: 17%; top: 19%; animation: wipe-right var(--duration) ease-out both; }
.m-sticky .motion-decor { width: 72%; height: 61%; background: var(--yellow); box-shadow: 3px 4px 0 rgba(17,16,15,.22); }
.is-playing .m-sticky .motion-decor { animation: sticky-in var(--duration) ease-out both; }
.m-tape .motion-decor { width: 80%; height: 42%; background: rgba(255,94,136,.66); transform: rotate(-2deg); clip-path: polygon(2% 0, 98% 3%, 100% 90%, 95% 100%, 3% 96%, 0 8%); }
.is-playing .m-tape .motion-decor { animation: slide-left var(--duration) ease-out both; }
.m-speech .motion-decor { width: 78%; height: 52%; border: 2px solid var(--ink); border-radius: 50%; background: white; }
.m-speech .motion-decor::after { content: ""; position: absolute; right: 13%; bottom: -13px; border: 12px solid transparent; border-top-color: var(--ink); transform: rotate(-18deg); }
.is-playing .m-speech .motion-decor { animation: pop-in var(--duration) ease-out both; }
.m-burst-bg .motion-decor { width: 80%; height: 72%; background: var(--yellow); clip-path: polygon(50% 0,60% 26%,82% 8%,78% 35%,100% 40%,79% 53%,95% 75%,69% 69%,62% 100%,49% 76%,30% 96%,29% 69%,0 72%,21% 52%,1% 35%,29% 32%,25% 6%,43% 26%); }
.is-playing .m-burst-bg .motion-decor { animation: pop-in var(--duration) ease-out both; }
.m-double-border .motion-decor { inset: 22% 10%; border: 4px double var(--pink); }
.is-playing .m-double-border .motion-decor { animation: zoom-up var(--duration) ease-out both; }
.m-stripes .motion-decor { width: 84%; height: 52%; background: repeating-linear-gradient(135deg, var(--pink-soft) 0 8px, white 8px 16px); background-size: 46px 46px; }
.is-playing .m-stripes .motion-decor { animation: stripes var(--duration) linear infinite; }
.m-confetti .motion-decor { inset: 5%; background: radial-gradient(circle, var(--pink) 0 3px, transparent 4px), radial-gradient(circle, var(--yellow) 0 3px, transparent 4px), linear-gradient(35deg, transparent 48%, var(--blue) 49% 53%, transparent 54%); background-size: 38px 42px, 47px 31px, 32px 36px; }
.is-playing .m-confetti .motion-decor { animation: confetti var(--duration) linear infinite; }
.m-stars .motion-decor { inset: 9%; background: radial-gradient(circle, var(--yellow) 0 3px, transparent 4px); background-size: 33px 29px; }
.is-playing .m-stars .motion-decor { animation: sparkle var(--duration) steps(2) infinite; }
.m-stacked .motion-decor { width: 72%; height: 46%; background: white; border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--pink), 12px 12px 0 var(--blue); }
.is-playing .m-stacked .motion-decor { animation: slide-left var(--duration) ease-out both; }
.m-neon-bg .motion-decor { width: 80%; height: 55%; background: #16141a; border-radius: 8px; box-shadow: 0 0 18px var(--pink); }
.m-neon-bg .motion-text { color: white; text-shadow: 0 0 7px var(--pink); }
.is-playing .m-neon-bg .motion-decor { animation: outline-glow var(--duration) ease-in-out infinite; }
.m-newspaper .motion-decor { width: 84%; height: 50%; background: var(--ink); }
.m-newspaper .motion-text { color: white; text-transform: uppercase; }
.is-playing .m-newspaper .motion-decor { animation: slide-left var(--duration) ease-out both; }
.m-chalk .motion-decor { width: 84%; height: 58%; background: #28362f; box-shadow: inset 0 0 17px rgba(255,255,255,.08); }
.m-chalk .motion-text { color: white; font-family: "Yu Mincho", serif; text-shadow: 1px 1px rgba(255,255,255,.4); }
.is-playing .m-chalk .motion-text { animation: wipe-right var(--duration) steps(8) both; }
.m-peel .motion-decor { width: 72%; height: 61%; background: var(--yellow); box-shadow: 3px 4px 0 rgba(17,16,15,.22); }
.is-playing .m-peel .motion-decor,
.is-playing .m-peel .motion-text { animation: peel-out var(--duration) ease-in both; transform-origin: 100% 0; }

@keyframes fade-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes float-up { from { opacity: 0; transform: translateY(22px) } to { opacity: 1; transform: none } }
@keyframes drop-soft { from { opacity: 0; transform: translateY(-22px) } to { opacity: 1; transform: none } }
@keyframes slide-left { from { opacity: 0; transform: translateX(-130%) } to { opacity: 1; transform: none } }
@keyframes slide-right { from { opacity: 0; transform: translateX(130%) } to { opacity: 1; transform: none } }
@keyframes rise-big { from { transform: translateY(100px) } to { transform: none } }
@keyframes fall-big { from { transform: translateY(-100px) } to { transform: none } }
@keyframes char-slide { from { opacity: 0; transform: translateX(15px) } to { opacity: 1; transform: none } }
@keyframes char-bounce { 0% { opacity:0; transform:translateY(-55px) scaleY(1.2) } 70% { opacity:1; transform:translateY(5px) scaleY(.8) } 100% { transform:none } }
@keyframes type-char { from { opacity:0 } to { opacity:1 } }
@keyframes blink-cursor { 0%,49% { opacity:1 } 50%,100% { opacity:0 } }
@keyframes word-fade { from { opacity:0; transform:translateY(5px) } to { opacity:1; transform:none } }
@keyframes word-scale { from { opacity:0; transform:scale(1.35) } to { opacity:1; transform:none } }
@keyframes zoom-down { from { opacity:0; transform:scale(3) } to { opacity:1; transform:none } }
@keyframes zoom-up { from { opacity:0; transform:scale(.55) } to { opacity:1; transform:none } }
@keyframes pop-in { 0% { opacity:0; transform:scale(0) } 72% { opacity:1; transform:scale(1.2) } 100% { transform:scale(1) } }
@keyframes bounce-in { 0% { transform:translateY(-80px) } 55% { transform:translateY(10px) } 75% { transform:translateY(-7px) } 90% { transform:translateY(3px) } 100% { transform:none } }
@keyframes elastic-in { 0% { opacity:0; transform:scaleX(.15) } 45% { opacity:1; transform:scaleX(1.28) } 68% { transform:scaleX(.84) } 85% { transform:scaleX(1.08) } 100% { transform:none } }
@keyframes flip-y { from { opacity:0; transform:rotateY(90deg) } to { opacity:1; transform:none } }
@keyframes flip-x { from { opacity:0; transform:rotateX(90deg) } to { opacity:1; transform:none } }
@keyframes flip-3d { from { opacity:0; transform:rotateY(180deg) } to { opacity:1; transform:none } }
@keyframes blur-in { from { opacity:0; filter:blur(18px) } to { opacity:1; filter:blur(0) } }
@keyframes scale-blur { from { opacity:0; filter:blur(14px); transform:scale(.78) } to { opacity:1; filter:none; transform:none } }
@keyframes spin-in { from { opacity:0; transform:rotateX(360deg) } to { opacity:1; transform:none } }
@keyframes drop-bounce { 0% { transform:translateY(-90px) } 65% { transform:scaleY(.72) translateY(4px) } 82% { transform:translateY(-9px) } 100% { transform:none } }
@keyframes spring-in { from { transform:translateX(-100px) } 70% { transform:translateX(12px) } to { transform:none } }
@keyframes diagonal { from { opacity:0; transform:translate(80px,70px) } to { opacity:1; transform:none } }
@keyframes curtain-open { from { transform:scaleX(1) } to { transform:scaleX(0) } }
@keyframes stretch-x { from { opacity:0; transform:scaleX(0) } to { opacity:1; transform:scaleX(1) } }
@keyframes wipe-up { from { clip-path:inset(100% 0 0) } to { clip-path:inset(0) } }
@keyframes wipe-right { from { clip-path:inset(0 100% 0 0) } to { clip-path:inset(0) } }
@keyframes circle-reveal { from { clip-path:circle(0 at 50% 50%) } to { clip-path:circle(75% at 50% 50%) } }
@keyframes zigzag-in { 0% { opacity:0; transform:translateX(-95px) } 25% { transform:translate(-55px,-15px) } 50% { transform:translate(-30px,13px) } 75% { transform:translate(-12px,-7px) } 100% { opacity:1; transform:none } }
@keyframes pendulum-in { 0% { opacity:0; transform:rotate(35deg) } 45% { opacity:1; transform:rotate(-18deg) } 70% { transform:rotate(9deg) } 88% { transform:rotate(-3deg) } 100% { transform:none } }
@keyframes shuffle { 0% { opacity:.1; filter:blur(8px); transform:skewX(20deg) } 20% { transform:translateX(5px) } 40% { transform:translateX(-7px) skewX(-18deg) } 60% { transform:translateX(9px) } 80% { filter:blur(3px) } 100% { opacity:1; filter:none; transform:none } }
@keyframes glitch-in { 0% { opacity:0; transform:translate(-8px,4px); clip-path:inset(0 0 60% 0) } 30% { opacity:1; transform:translate(8px,-3px); clip-path:inset(40% 0 10% 0) } 60% { transform:translate(-4px,2px); clip-path:inset(10% 0 42% 0) } 100% { transform:none; clip-path:inset(0); text-shadow:none } }
@keyframes particles-in { from { opacity:0; transform:scale(2) rotate(35deg) } to { opacity:1; transform:none } }
@keyframes ink-in { from { opacity:0; filter:blur(13px) contrast(2); transform:scale(1.16) } to { opacity:1; filter:none; transform:none } }
@keyframes shadow-lead { 0% { opacity:0; transform:translate(12px,12px); text-shadow:0 0 0 var(--pink) } 45% { opacity:.35; transform:translate(7px,7px) } 100% { opacity:1; transform:none; text-shadow:7px 7px 0 var(--pink) } }
@keyframes bounce-loop { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-9px) } }
@keyframes breathe { 0%,100% { transform:scale(1) } 50% { transform:scale(1.08) } }
@keyframes shake { 0%,100% { transform:translateX(-2px) } 50% { transform:translateX(2px) } }
@keyframes sway { 0%,100% { transform:rotate(-9deg) } 50% { transform:rotate(9deg) } }
@keyframes rainbow { 0% { color:#ef3f56 } 25% { color:#e5b500 } 50% { color:#32a76b } 75% { color:#268fcd } 100% { color:#a84ec4 } }
@keyframes blink { 0%,49% { opacity:1 } 50%,100% { opacity:.25 } }
@keyframes outline-glow { 0%,100% { text-shadow:0 0 0 transparent } 50% { text-shadow:0 0 12px var(--pink), 0 0 20px var(--pink) } }
@keyframes shine { from { background-position:180% 0 } to { background-position:-80% 0 } }
@keyframes neon { 0%,18%,22%,100% { text-shadow:0 0 3px white,0 0 12px var(--pink); opacity:1 } 20%,70% { text-shadow:none; opacity:.45 } }
@keyframes shadow-pulse { 0%,100% { text-shadow:2px 2px 0 var(--pink) } 50% { text-shadow:12px 12px 0 var(--pink) } }
@keyframes char-jump { 0%,55%,100% { transform:none } 28% { transform:translateY(-12px) } }
@keyframes karaoke { from { background-position:100% 0 } to { background-position:0 0 } }
@keyframes line-grow { 0%,18% { transform:scaleX(0) } 68%,100% { transform:scaleX(1) } }
@keyframes wave-line { from { background-position:0 0 } to { background-position:24px 0 } }
@keyframes double-line { 0%,49% { border-top-color:var(--pink); border-bottom-color:var(--blue) } 50%,100% { border-top-color:var(--blue); border-bottom-color:var(--pink) } }
@keyframes draw-box { 0% { clip-path:polygon(0 0,0 0,0 0,0 0) } 40% { clip-path:polygon(0 0,100% 0,100% 0,0 0) } 100% { clip-path:polygon(0 0,100% 0,100% 100%,0 100%) } }
@keyframes spin { to { transform:rotate(360deg) } }
@keyframes sparkle { 0%,100% { opacity:.25; transform:scale(.9) } 50% { opacity:1; transform:scale(1.06) } }
@keyframes attention { 0%,100% { transform:none } 20% { transform:translateX(-5px) rotate(-2deg) } 40% { transform:translateX(5px) rotate(2deg) } 60% { transform:translateX(-3px) } 80% { transform:translateX(3px) } }
@keyframes pulse { 0%,100% { transform:scale(1) } 50% { transform:scale(1.12) } }
@keyframes metronome { 0%,100% { transform:rotate(-5deg) } 50% { transform:rotate(5deg) } }
@keyframes shadow-color { 0%,49% { text-shadow:5px 5px var(--pink) } 50%,100% { text-shadow:5px 5px var(--blue) } }
@keyframes fade-out { from { opacity:1 } to { opacity:0 } }
@keyframes exit-up { from { opacity:1 } to { opacity:0; transform:translateY(-25px) } }
@keyframes exit-down { from { opacity:1 } to { opacity:0; transform:translateY(25px) } }
@keyframes split-left { to { opacity:0; transform:translateX(-90px) } }
@keyframes split-right { to { opacity:0; transform:translateX(90px) } }
@keyframes shrink-out { to { opacity:0; transform:scale(0) } }
@keyframes burst-out { to { opacity:0; transform:scale(1.7) } }
@keyframes blur-out { to { opacity:0; filter:blur(18px); transform:scale(1.1) } }
@keyframes wipe-hide { from { clip-path:inset(0) } to { clip-path:inset(0 0 100% 0) } }
@keyframes shatter { to { opacity:0; transform:translate(calc((var(--i) - 1.5) * 32px), calc((var(--i) + 1) * 13px)) rotate(calc(var(--i) * 35deg)) scale(.4) } }
@keyframes melt { to { opacity:0; filter:blur(5px); transform:scaleY(1.8) translateY(35px) } }
@keyframes flash-out { 0% { filter:brightness(1) } 55% { filter:brightness(7); color:white; text-shadow:0 0 18px white } 100% { opacity:0; transform:scale(1.3) } }
@keyframes spin-out { to { opacity:0; transform:rotate(360deg) scale(0) } }
@keyframes curtain-close { to { clip-path:inset(0 50%) } }
@keyframes clamp-in { from { opacity:0; transform:scaleY(2.5) } to { opacity:1; transform:none } }
@keyframes gradient-flow { to { background-position:300% 0 } }
@keyframes sticky-in { from { opacity:0; transform:translateY(-80px) rotate(18deg) } to { opacity:1; transform:rotate(-2deg) } }
@keyframes stripes { to { background-position:46px 0 } }
@keyframes confetti { from { opacity:0; transform:translateY(-35px) rotate(0) } 25% { opacity:1 } to { transform:translateY(45px) rotate(25deg) } }
@keyframes peel-out { to { opacity:0; transform:rotateY(84deg) translate(40px,-12px) } }

.empty-state { text-align: center; padding: 70px 20px; border: 2px dashed var(--ink); background: rgba(255,255,255,.7); }
.empty-state > span { font: 900 50px/1 serif; }
.empty-state h3 { margin: 8px 0; font-size: 22px; }
.empty-state p { margin: 0 0 20px; color: var(--muted); font-size: 13px; }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 16px; border: 2px solid var(--ink); text-decoration: none; font-size: 12px; font-weight: 900; cursor: pointer; }
.button-dark { color: white; background: var(--ink); }
.button-dark:hover { background: var(--pink); }

.saved-heading { display: flex; align-items: end; justify-content: space-between; padding: 12px 0 25px; border-bottom: 2px solid var(--ink); }
.saved-heading h2 { margin: 0; font: 900 clamp(38px, 5vw, 70px)/.95 "Arial Black", sans-serif; letter-spacing: -.06em; }
.saved-heading > p { margin: 0; font-size: 12px; }
.saved-heading strong { font: 900 36px/1 "Arial Black", sans-serif; }
.saved-table-wrap { margin-top: 22px; border: 2px solid var(--ink); background: rgba(255,255,255,.92); overflow-x: auto; }
.saved-table { width: 100%; min-width: 900px; border-collapse: collapse; text-align: left; }
.saved-table th { background: var(--ink); color: white; font: 700 10px/1 ui-monospace, monospace; letter-spacing: .1em; padding: 12px; }
.saved-table td { border-bottom: 1px solid var(--ink); padding: 10px 12px; font-size: 12px; vertical-align: middle; }
.saved-table tr:last-child td { border-bottom: 0; }
.saved-table tr:hover td { background: var(--pink-soft); }
.table-preview { width: 76px; height: 62px; border: 1px solid var(--ink); overflow: hidden; background: white; }
.table-preview .motion-text { font-size: 17px; }
.table-name { font-weight: 900; max-width: 190px; }
.table-prompt { max-width: 330px; line-height: 1.6; color: #4c4743; }
.table-action { display: flex; gap: 5px; justify-content: flex-end; }
.icon-button { width: 34px; height: 34px; border: 1px solid var(--ink); background: white; cursor: pointer; }
.icon-button:hover { background: var(--yellow); }
.saved-empty { padding: 72px 20px; text-align: center; }
.saved-empty .empty-star { font-size: 55px; }
.saved-empty h3 { margin: 4px 0 8px; }
.saved-empty p { margin: 0 0 20px; color: var(--muted); font-size: 12px; }

.detail-dialog { width: min(920px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 2px solid var(--ink); background: var(--paper); box-shadow: 12px 12px 0 var(--ink); overflow: auto; }
.detail-dialog::backdrop { background: rgba(17,16,15,.66); backdrop-filter: blur(4px); }
.dialog-close { position: absolute; right: 12px; top: 12px; z-index: 10; width: 38px; height: 38px; border: 2px solid var(--ink); background: white; font-size: 25px; line-height: 1; cursor: pointer; }
.dialog-close:hover { background: var(--pink); color: white; }
.dialog-grid { display: grid; grid-template-columns: minmax(300px, .9fr) 1.15fr; }
.dialog-preview-wrap { min-height: 500px; padding: 28px; display: flex; flex-direction: column; background-color:white; background-image:linear-gradient(rgba(255,94,136,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(255,94,136,.15) 1px,transparent 1px); background-size:22px 22px; border-right:2px solid var(--ink); }
.dialog-label { margin: 0 0 22px; }
.dialog-preview { width: min(100%, 330px); aspect-ratio: 1; margin: auto; border: 2px solid var(--ink); background: white; overflow: hidden; }
.dialog-preview .motion-text { font-size: clamp(38px, 5vw, 62px); }
.replay-button { margin: 22px auto 0; border: 0; border-bottom: 2px solid var(--ink); background: transparent; font-size: 12px; font-weight: 900; cursor: pointer; }
.dialog-content { padding: 66px 32px 30px; }
.dialog-meta { display: flex; gap: 7px; flex-wrap: wrap; }
.dialog-meta span { border: 1px solid var(--ink); padding: 5px 8px; font: 700 10px/1 ui-monospace, monospace; }
.dialog-content h2 { margin: 18px 0 12px; font-size: clamp(28px, 4vw, 46px); line-height: 1.05; letter-spacing: -.045em; }
.dialog-description { margin: 0; color: #4f4a45; font-size: 13px; line-height: 1.9; }
.prompt-block { margin-top: 26px; }
.prompt-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 8px; }
.prompt-heading label { font-size: 12px; font-weight: 900; }
.copy-button { border: 1.5px solid var(--ink); background: var(--yellow); padding: 7px 12px; font-size: 11px; font-weight: 900; cursor: pointer; }
.prompt-block textarea { width: 100%; height: 132px; resize: none; border: 1.5px solid var(--ink); background: white; padding: 12px; font-size: 12px; line-height: 1.7; }
.copy-feedback { min-height: 18px; margin: 4px 0 0; color: #a83455; font-size: 10px; font-weight: 900; }
.save-detail-button { width: 100%; min-height: 46px; margin-top: 8px; border: 2px solid var(--ink); background: white; font-size: 12px; font-weight: 900; cursor: pointer; }
.save-detail-button.is-saved { background: var(--yellow); }

.toast { position: fixed; z-index: 200; right: 22px; bottom: 22px; padding: 12px 16px; color: white; background: var(--ink); border: 2px solid white; box-shadow: 4px 4px 0 var(--pink); font-size: 12px; font-weight: 800; transform: translateY(25px); opacity: 0; pointer-events: none; transition: .2s ease; }
.toast.is-visible { transform: none; opacity: 1; }

footer { display: flex; justify-content: space-between; gap: 20px; padding: 22px 0 28px; border-top: 2px solid var(--ink); font: 700 9px/1.4 ui-monospace, monospace; letter-spacing: .08em; }
footer p { margin: 0; }

@media (max-width: 900px) {
  .sidebar { width: 76px; padding: 14px 9px; }
  .brand { padding: 11px 8px 13px; box-shadow: 3px 3px 0 var(--pink); }
  .brand-kicker, .brand-dot, .save-pocket, .side-note, .side-link span:not(.side-icon) { display:none; }
  .brand-mark { font-size:16px; text-align:center; line-height:1.15; }
  .side-link { grid-template-columns:1fr; padding:8px; }
  .page { margin-left:76px; padding:0 20px; }
  .top-rule { margin:0 -20px; }
  .masthead { min-height:210px; }
  .masthead-note { display:none; }
  .toolbar { align-items:stretch; flex-direction:column; }
  .search-box { width:100%; }
  .dialog-grid { grid-template-columns:1fr; }
  .dialog-preview-wrap { min-height:390px; border-right:0; border-bottom:2px solid var(--ink); }
  .dialog-preview { max-width:260px; }
  .dialog-content { padding:38px 24px 25px; }
}

@media (max-width: 560px) {
  .sidebar { position:sticky; top:0; inset:auto; width:100%; height:60px; padding:8px 12px; flex-direction:row; align-items:center; border-right:0; border-bottom:2px solid var(--ink); }
  .brand { width:95px; padding:5px 8px; box-shadow:2px 2px 0 var(--pink); }
  .brand-mark { font-size:13px; line-height:1; }
  .side-nav { margin:0 0 0 auto; display:flex; }
  .side-link { min-height:40px; width:44px; }
  .page { margin-left:0; padding:0 14px; }
  .top-rule { height:10px; margin:0 -14px; }
  .masthead { min-height:180px; padding:28px 0 22px; }
  .masthead h1 { font-size:42px; }
  main { padding-top:20px; }
  .card-grid { grid-template-columns:repeat(2, minmax(0,1fr)); gap:9px; }
  .motion-card { aspect-ratio:.82; }
  .motion-text { font-size:22px; }
  .toolbar { padding:9px; }
  .search-box kbd { display:none; }
  .result-bar { align-items:end; }
  .result-bar p:last-child { text-align:right; max-width:160px; }
  .saved-heading { align-items:start; flex-direction:column; gap:16px; }
  .detail-dialog { width:calc(100vw - 18px); max-height:calc(100vh - 18px); box-shadow:5px 5px 0 var(--ink); }
  footer { flex-direction:column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ── 2026 visual refresh: film-library UI ───────────────────────────── */
:root {
  --ink: #17243a;
  --paper: #f6f2e9;
  --paper-deep: #e9e3d7;
  --pink: #d6aa48;
  --pink-soft: #f1e5c5;
  --yellow: #e7c870;
  --blue: #7fa8a3;
  --line: #23324a;
  --muted: #697386;
  --shadow: 0 16px 35px rgba(23,36,58,.12);
}

body {
  background-color: var(--paper);
  background-image: radial-gradient(circle, rgba(23,36,58,.1) 1px, transparent 1.2px);
  background-size: 22px 22px;
}

.sidebar {
  color: #f8f6f0;
  background: #17243a;
  border-right: 0;
  box-shadow: 8px 0 30px rgba(23,36,58,.14);
}
.brand { border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.06); box-shadow: none; }
.brand-dot { background: var(--yellow); border-color: white; }
.side-link:hover { color: var(--ink); background: var(--yellow); }
.side-link.is-active { color: var(--ink); border-color: var(--yellow); background: var(--yellow); }
.save-pocket { color: var(--ink); border: 0; border-radius: 13px; background: #fff; box-shadow: 0 12px 28px rgba(0,0,0,.2); transform: rotate(-1deg); }
.save-pocket .tape { display: none; }
.save-pocket p { font-size: 20px; letter-spacing: -.03em; }
.side-note { color: rgba(255,255,255,.55); }
.top-rule { height: 9px; background: var(--pink); }
.masthead { min-height: 224px; border-bottom: 1px solid rgba(23,36,58,.28); }
.masthead h1 { font-size: clamp(38px, 5.2vw, 72px); line-height: .96; letter-spacing: -.065em; color: var(--ink); }
.masthead h1 span { color: var(--ink); -webkit-text-stroke: 0; }
.masthead-note { padding: 18px 20px; border-radius: 14px; text-align: left; background: rgba(255,255,255,.72); box-shadow: 0 10px 28px rgba(23,36,58,.08); }
.scribble { transform: none; color: #33445f; border: 0; font: 800 10px/1 ui-monospace, monospace; letter-spacing: .14em; }
.category-tab { border: 1px solid #9ca5b2; border-radius: 999px; background: rgba(255,255,255,.72); }
.category-tab[aria-selected="true"] { color: var(--ink); border-color: var(--ink); background: var(--yellow); box-shadow: none; }
.toolbar { border: 0; border-radius: 18px; background: rgba(255,255,255,.84); box-shadow: var(--shadow); }
.search-box { border: 1px solid #aeb5bf; border-radius: 11px; }
.filter-chip { border: 1px solid #9ca5b2; }
.filter-chip.is-active { color: white; border-color: var(--ink); background: var(--ink); }
.result-actions { display: flex; align-items: center; gap: 18px; }
.speed-control { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.82); box-shadow: 0 6px 18px rgba(23,36,58,.08); }
.speed-control > span { margin: 0 7px; color: var(--muted); font: 800 8px/1 ui-monospace,monospace; letter-spacing: .12em; }
.speed-button { padding: 7px 10px; border: 0; border-radius: 999px; color: var(--muted); background: transparent; font-size: 10px; font-weight: 800; cursor: pointer; }
.speed-button.is-active { color: white; background: var(--ink); }
.motion-card { border: 1px solid rgba(23,36,58,.34); border-radius: 14px; box-shadow: 0 5px 16px rgba(23,36,58,.06); }
.motion-card:hover, .motion-card:focus-within { transform: translateY(-5px); box-shadow: 0 18px 34px rgba(23,36,58,.18); }
.motion-card::after { height: 5px; }
.card-save { border: 1px solid rgba(23,36,58,.4); border-radius: 50%; }
.preview { background-color: #f9faf7; background-image: radial-gradient(circle, rgba(23,36,58,.10) 1px, transparent 1.2px); background-size: 14px 14px; border-bottom-color: rgba(23,36,58,.25); }
.detail-dialog { border: 0; border-radius: 20px; box-shadow: 0 25px 80px rgba(9,18,31,.35); }
.dialog-preview-wrap { border-right: 0; background-color:#edf1f2; background-image:radial-gradient(circle,rgba(23,36,58,.12) 1px,transparent 1.2px); background-size:18px 18px; }
.dialog-preview { border: 0; border-radius: 16px; box-shadow: 0 18px 40px rgba(23,36,58,.18); }

/* Slow mode for staggered motions that use fixed delays. */
.is-playing .speed-slow.m-chars-fade .motion-text span { animation-duration: .8s; animation-delay: calc(var(--i) * .22s); }
.is-playing .speed-slow.m-chars-slide .motion-text span { animation-duration: .85s; animation-delay: calc(var(--i) * .22s); }
.is-playing .speed-slow.m-chars-bounce .motion-text span { animation-duration: 1.05s; animation-delay: calc(var(--i) * .25s); }
.is-playing .speed-slow.m-type-cursor .motion-text span,
.is-playing .speed-slow.m-type-simple .motion-text span { animation-delay: calc(var(--i) * .42s); }
.is-playing .speed-slow.m-word-fade .motion-text span,
.is-playing .speed-slow.m-word-scale .motion-text span { animation-duration: .95s; animation-delay: calc(var(--i) * .45s); }
.is-playing .speed-slow.m-chars-out .motion-text span { animation-duration: .65s; animation-delay: calc(var(--i) * .2s); }
.is-playing .speed-slow.m-chars-out-reverse .motion-text span { animation-duration: .65s; animation-delay: calc(var(--reverse-i) * .2s); }

/* Font samples */
.preview-font { overflow: hidden; padding: 22px 10px 10px; background: linear-gradient(135deg,#fff 0 63%,#eef0ec 63%); }
.font-guide { position: absolute; left: 9px; top: 9px; color: #8b94a3; font: 700 8px/1 ui-monospace,monospace; letter-spacing: .12em; }
.font-sample { position: relative; z-index: 2; max-width: 92%; font-size: clamp(19px, 1.8vw, 29px); white-space: nowrap; transform-origin: center; }

/* Character motion samples */
.preview-character { overflow: hidden; background: linear-gradient(#dff2ef 0 74%,#c8ded8 74%); }
.preview-character.has-photo { background:#fff; }
.character-figure.character-photo { width:118px; height:142px; object-fit:contain; transform-origin:50% 82%; }
.preview-character.has-photo .character-shadow { top:84%; width:82px; margin-left:-41px; }
.preview-character.has-photo .motion-path { display:none; }
.character-figure { position: relative; z-index: 3; width: 48px; height: 76px; transform-origin: 50% 82%; }
.char-head { position: absolute; left: 8px; top: 0; width: 34px; height: 34px; border: 2px solid var(--ink); border-radius: 48% 48% 52% 46%; background: #ffc76b; }
.char-head i,.char-head b { position:absolute; top:13px; width:3px; height:4px; border-radius:50%; background:var(--ink); }
.char-head i { left:9px; }.char-head b { right:9px; }
.char-body { position:absolute; left:11px; top:31px; width:28px; height:31px; border:2px solid var(--ink); border-radius:12px 12px 8px 8px; background:var(--pink); }
.char-arm,.char-leg { position:absolute; width:8px; border:2px solid var(--ink); border-radius:8px; background:#ffc76b; transform-origin:50% 0; }
.char-arm { top:36px; height:27px; }.char-arm.left { left:4px; transform:rotate(20deg); }.char-arm.right { right:2px; transform:rotate(-20deg); }
.char-leg { top:58px; height:23px; background:#5db7d6; }.char-leg.left { left:12px; }.char-leg.right { right:8px; }
.character-shadow { position:absolute; z-index:1; left:50%; top:77%; width:54px; height:10px; margin-left:-27px; border-radius:50%; background:rgba(23,36,58,.18); }
.motion-path { position:absolute; left:20%; top:23%; width:60%; height:46%; border:1px dashed rgba(23,36,58,.22); border-color:rgba(23,36,58,.25) transparent transparent; border-radius:50%; }
.is-playing .effect-jump-in .character-figure { animation:char-jump-in var(--duration) ease-out both; }
.is-playing .effect-drop-in .character-figure { animation:drop-bounce var(--duration) ease-out both; }
.is-playing .effect-run-in .character-figure { animation:char-run-in var(--duration) ease-out both; }
.is-playing .effect-spin-in .character-figure { animation:spin-in var(--duration) ease-out both; }
.is-playing .effect-pop-in .character-figure { animation:pop-in var(--duration) ease-out both; }
.is-playing .effect-smoke-in .character-figure { animation:ink-in var(--duration) ease-out both; }
.is-playing .effect-approach .character-figure { animation:char-approach var(--duration) ease-in-out infinite alternate; }
.is-playing .effect-zigzag-in .character-figure { animation:zigzag-in var(--duration) ease-out both; }
.is-playing .effect-jump .character-figure { animation:char-jump var(--duration) ease-in-out infinite; }
.is-playing .effect-big-jump .character-figure { animation:char-big-jump var(--duration) ease-in-out infinite; }
.is-playing .effect-walk .character-figure { animation:char-walk var(--duration) linear infinite; }
.is-playing .effect-walk .char-leg.left,.is-playing .effect-run .char-leg.left { animation:limb-a calc(var(--duration)/2) ease-in-out infinite; }
.is-playing .effect-walk .char-leg.right,.is-playing .effect-run .char-leg.right { animation:limb-b calc(var(--duration)/2) ease-in-out infinite; }
.is-playing .effect-run .character-figure { animation:char-run var(--duration) linear infinite; }
.is-playing .effect-float .character-figure { animation:float-char var(--duration) ease-in-out infinite; }
.is-playing .effect-recede .character-figure { animation:char-recede var(--duration) ease-in-out infinite alternate; }
.is-playing .effect-orbit .character-figure { animation:char-orbit var(--duration) linear infinite; }
.is-playing .effect-spin .character-figure,.is-playing .effect-top-spin .character-figure { animation:spin var(--duration) linear infinite; }
.is-playing .effect-turn-y .character-figure,.is-playing .effect-half-turn .character-figure { animation:turn-y var(--duration) ease-in-out infinite alternate; }
.is-playing .effect-flip-x .character-figure { animation:flip-x var(--duration) ease-in-out infinite; }
.is-playing .effect-twist .character-figure { animation:twist var(--duration) ease-in-out infinite; }
.is-playing .effect-look-around .char-head { animation:look-around var(--duration) ease-in-out infinite; }
.is-playing .effect-tilt .character-figure,.is-playing .effect-wonder .character-figure { animation:tilt-char var(--duration) ease-in-out infinite; }
.is-playing .effect-surprise .character-figure { animation:surprise var(--duration) ease-out infinite; }
.is-playing .effect-nod .char-head { animation:nod var(--duration) ease-in-out infinite; }
.is-playing .effect-wave .char-arm.right { animation:wave-arm calc(var(--duration)/2) ease-in-out infinite; }
.is-playing .effect-cheer .char-arm.left { animation:cheer-left var(--duration) ease-out infinite; }
.is-playing .effect-cheer .char-arm.right { animation:cheer-right var(--duration) ease-out infinite; }
.is-playing .effect-sad .character-figure { animation:sad-char var(--duration) ease-in-out infinite; }
.is-playing .effect-tremble .character-figure { animation:shake calc(var(--duration)/7) steps(2) infinite; }
.is-playing .effect-breathe .character-figure { animation:breathe var(--duration) ease-in-out infinite; }
.is-playing .effect-squash .character-figure { animation:squash-char var(--duration) ease-in-out infinite; }
.is-playing .effect-stretch .character-figure { animation:stretch-char var(--duration) ease-in-out infinite; }
.is-playing .effect-jelly .character-figure { animation:jelly-char var(--duration) ease-in-out infinite; }
.is-playing .effect-inflate .character-figure { animation:inflate-char var(--duration) ease-in-out infinite; }
.is-playing .effect-fold .character-figure { animation:fold-char var(--duration) ease-in-out infinite; }
.is-playing .effect-scatter .character-figure { animation:shatter var(--duration) ease-in-out infinite; }
.is-playing .effect-shadow-lag .character-figure { animation:shadow-lag var(--duration) ease-in-out infinite; }
.is-playing .effect-afterimage .character-figure { animation:afterimage var(--duration) ease-in-out infinite; }
.is-playing .effect-look-around .character-photo { animation:look-around var(--duration) ease-in-out infinite; }
.is-playing .effect-nod .character-photo { animation:nod var(--duration) ease-in-out infinite; }
.is-playing .effect-wave .character-photo { animation:tilt-char var(--duration) ease-in-out infinite; }
.is-playing .effect-cheer .character-photo { animation:surprise var(--duration) ease-out infinite; }

@keyframes char-jump-in { from{opacity:0;transform:translateY(80px) scale(.7)} 65%{opacity:1;transform:translateY(-16px)} 82%{transform:translateY(5px)} to{transform:none} }
@keyframes char-run-in { from{transform:translateX(-120px) rotate(-8deg)} 80%{transform:translateX(8px) rotate(3deg)} to{transform:none} }
@keyframes char-approach { from{transform:scale(.45);filter:blur(1px)} to{transform:scale(1.28)} }
@keyframes char-jump { 0%,100%{transform:none} 45%{transform:translateY(-25px)} 60%{transform:scaleY(.86)} }
@keyframes char-big-jump { 0%,100%{transform:none} 45%{transform:translateY(-56px) rotate(5deg)} 67%{transform:scaleY(.72)} }
@keyframes char-walk { 0%{transform:translateX(-65px)} 100%{transform:translateX(65px)} }
@keyframes char-run { 0%{transform:translateX(-75px) rotate(-8deg)} 100%{transform:translateX(75px) rotate(5deg)} }
@keyframes limb-a { 0%,100%{transform:rotate(24deg)} 50%{transform:rotate(-24deg)} }
@keyframes limb-b { 0%,100%{transform:rotate(-24deg)} 50%{transform:rotate(24deg)} }
@keyframes float-char { 0%,100%{transform:translateY(8px) rotate(-2deg)} 50%{transform:translateY(-15px) rotate(2deg)} }
@keyframes char-recede { from{transform:scale(1.22)} to{transform:scale(.45);filter:blur(1px)} }
@keyframes char-orbit { 0%{transform:translate(-42px,10px) scale(.75)} 25%{transform:translate(0,-20px) scale(1)} 50%{transform:translate(42px,10px) scale(.75)} 75%{transform:translate(0,20px) scale(.55)} 100%{transform:translate(-42px,10px) scale(.75)} }
@keyframes turn-y { from{transform:rotateY(0)} to{transform:rotateY(180deg)} }
@keyframes twist { 0%,100%{transform:rotate(-6deg) skewX(-4deg)} 50%{transform:rotate(7deg) skewX(6deg)} }
@keyframes look-around { 0%,100%{transform:translateX(-5px) rotate(-4deg)} 50%{transform:translateX(5px) rotate(4deg)} }
@keyframes tilt-char { 0%,100%{transform:rotate(-11deg)} 50%{transform:rotate(10deg)} }
@keyframes surprise { 0%,100%{transform:none} 30%{transform:translateY(-28px) scale(1.12)} 48%{transform:scaleY(.83)} }
@keyframes nod { 0%,100%{transform:none} 50%{transform:translateY(6px) rotateX(22deg)} }
@keyframes wave-arm { 0%,100%{transform:rotate(-70deg)} 50%{transform:rotate(-125deg)} }
@keyframes cheer-left { 0%,100%{transform:rotate(20deg)} 40%,70%{transform:rotate(150deg)} }
@keyframes cheer-right { 0%,100%{transform:rotate(-20deg)} 40%,70%{transform:rotate(-150deg)} }
@keyframes sad-char { 0%,100%{transform:translateY(0);filter:saturate(1)} 50%{transform:translateY(13px) scaleY(.9);filter:saturate(.5)} }
@keyframes squash-char { 0%,100%{transform:none} 50%{transform:scale(1.2,.65) translateY(18px)} }
@keyframes stretch-char { 0%,100%{transform:none} 50%{transform:scale(1.45,.72)} }
@keyframes jelly-char { 0%,100%{transform:none} 25%{transform:skewX(10deg) scaleX(1.12)} 55%{transform:skewX(-8deg) scaleY(1.1)} 78%{transform:skewX(4deg)} }
@keyframes inflate-char { 0%,100%{transform:scale(.8)} 55%{transform:scale(1.35)} }
@keyframes fold-char { 0%,100%{transform:rotateX(0)} 50%{transform:rotateX(78deg) scaleY(.4)} }
@keyframes shadow-lag { 0%,100%{transform:translateX(-15px);filter:drop-shadow(18px 0 0 rgba(255,121,104,.5))} 50%{transform:translateX(15px);filter:drop-shadow(-18px 0 0 rgba(93,183,214,.5))} }
@keyframes afterimage { 0%,100%{transform:translateX(-24px);filter:drop-shadow(12px 0 rgba(255,121,104,.65)) drop-shadow(24px 0 rgba(93,183,214,.45))} 50%{transform:translateX(24px);filter:drop-shadow(-12px 0 rgba(255,121,104,.65)) drop-shadow(-24px 0 rgba(93,183,214,.45))} }

/* Light samples */
.preview-light { overflow:hidden; background:#101827; }
.light-photo { position:absolute; z-index:1; inset:0; width:100%; height:100%; object-fit:cover; }
.preview-light.has-photo .light-subject,
.preview-light.has-photo .light-floor { display:none; }
.preview-light.has-photo .light-beam { mix-blend-mode:screen; opacity:.34; }
.preview-light.has-photo.effect-flash-hard .light-beam,
.preview-light.has-photo.effect-flash-double .light-beam,
.preview-light.has-photo.effect-strobe .light-beam { opacity:0; }
.light-subject { position:absolute; z-index:3; width:48px; height:64px; border-radius:50% 50% 42% 42%; background:#6f7887; box-shadow:0 7px 0 #353f50; }
.light-floor { position:absolute; left:10%; right:10%; top:75%; height:1px; background:rgba(255,255,255,.22); }
.light-beam { position:absolute; z-index:2; inset:-20%; opacity:.86; }
.light-orb { position:absolute; z-index:4; width:20px; height:20px; border-radius:50%; background:white; filter:blur(5px); opacity:0; }
.effect-left-soft .light-beam,.effect-diagonal-left .light-beam { background:linear-gradient(105deg,rgba(255,232,181,.9),transparent 53%); }
.effect-right-soft .light-beam,.effect-diagonal-right .light-beam { background:linear-gradient(255deg,rgba(255,232,181,.9),transparent 53%); }
.effect-top-spot .light-beam { background:conic-gradient(from 160deg at 50% 0,transparent 0 15%,rgba(255,244,201,.88) 22% 36%,transparent 43%); }
.effect-bottom-dramatic .light-beam { background:radial-gradient(ellipse at 50% 100%,rgba(255,128,76,.95),transparent 58%); }
.effect-backlight .light-subject { box-shadow:0 0 22px 8px #fff1a8,0 7px 0 #353f50; background:#182031; }
.effect-orbit-light .light-beam { background:conic-gradient(from 0deg,transparent,rgba(255,235,171,.9),transparent 35%); }
.is-playing .effect-orbit-light .light-beam { animation:spin var(--duration) linear infinite; }
.effect-flash-soft .light-beam,.effect-flash-hard .light-beam,.effect-flash-double .light-beam,.effect-strobe .light-beam { background:white; opacity:0; }
.is-playing .effect-flash-soft .light-beam { animation:light-flash var(--duration) ease-in-out infinite; }
.is-playing .effect-flash-hard .light-beam { animation:light-hard-flash var(--duration) steps(1) infinite; }
.is-playing .effect-flash-double .light-beam { animation:light-double var(--duration) steps(1) infinite; }
.is-playing .effect-strobe .light-beam { animation:light-strobe var(--duration) steps(1) infinite; }
.effect-glow-up .light-beam,.effect-afterglow .light-beam { background:radial-gradient(circle,#fffbd2,rgba(255,206,111,.55),transparent 65%); }
.is-playing .effect-glow-up .light-beam { animation:glow-up var(--duration) ease-in-out infinite; }
.is-playing .effect-afterglow .light-beam { animation:after-glow var(--duration) ease-out infinite; }
.effect-rim-glow .light-subject { background:#17243a; box-shadow:0 0 0 2px #7df4ff,0 0 16px #42dfee; }
.effect-radial-flash .light-beam { background:radial-gradient(circle,white 0,rgba(255,228,132,.7) 15%,transparent 60%); }
.is-playing .effect-radial-flash .light-beam { animation:radial-light var(--duration) ease-out infinite; }
.effect-morning { background:linear-gradient(145deg,#8bbbd2,#eef6e8); }.effect-daylight { background:linear-gradient(145deg,#73bde5,#fff3c5); }
.effect-sunset { background:linear-gradient(145deg,#483d77,#f19b70,#ffd89d); }.effect-moonlight { background:linear-gradient(145deg,#071126,#233c6a); }
.effect-window-rays .light-beam { background:repeating-linear-gradient(105deg,transparent 0 19%,rgba(255,234,176,.6) 20% 27%,transparent 28% 38%); }
.effect-overcast { background:linear-gradient(145deg,#8b97a3,#d8dedc); }.effect-blue-hour { background:linear-gradient(145deg,#1d3567,#597eac,#d5a4a0); }
.effect-warm-room { background:radial-gradient(circle at 20% 20%,#ffc86b,#6d3e3b 55%,#182033); }
.effect-bloom-soft .light-beam { background:radial-gradient(circle,rgba(255,196,220,.95),transparent 62%); filter:blur(15px); }
.effect-hard-edge .light-beam { background:linear-gradient(115deg,#fff 0 28%,transparent 29%); }
.effect-neon-pink .light-subject { box-shadow:0 0 22px #ff3aa8; background:#ff69bc; }.effect-neon-blue .light-subject { box-shadow:0 0 22px #28d8ff; background:#5ae8ff; }
.effect-dust-light .light-beam { background:radial-gradient(circle,#fff 0 1px,transparent 2px); background-size:15px 19px; }
.is-playing .effect-dust-light .light-beam { animation:particles-in var(--duration) linear infinite alternate; }
.effect-water-reflect .light-beam { background:repeating-radial-gradient(ellipse at 50% 100%,rgba(110,220,255,.75) 0 3px,transparent 5px 13px); }
.is-playing .effect-water-reflect .light-beam { animation:wave-light var(--duration) ease-in-out infinite; }
.effect-lens-flare .light-orb,.effect-prism .light-orb { opacity:1; box-shadow:28px 10px 0 -5px #5db7d6,55px 17px 0 -7px #ff7968,-30px -10px 0 -6px #c9f36b; }
.is-playing .effect-lens-flare .light-orb,.is-playing .effect-prism .light-orb { animation:flare-move var(--duration) ease-in-out infinite; }
.effect-prism .light-beam { background:linear-gradient(120deg,transparent 25%,rgba(255,80,80,.25),rgba(255,220,60,.25),rgba(80,220,170,.25),rgba(80,150,255,.25),transparent 72%); }
.effect-scan .light-beam { width:16%; inset:-10% auto -10% -20%; background:linear-gradient(90deg,transparent,#fff,transparent); }
.is-playing .effect-scan .light-beam { animation:scan-light var(--duration) linear infinite; }
.effect-light-ring .light-orb { opacity:1; width:30px; height:30px; border:3px solid white; background:transparent; filter:none; }
.is-playing .effect-light-ring .light-orb { animation:ring-light var(--duration) ease-out infinite; }
.effect-beam-gather .light-beam { background:conic-gradient(from 0deg,transparent 0 12%,white 13% 15%,transparent 16% 40%,#ffd77d 41% 44%,transparent 45%); }
.is-playing .effect-beam-gather .light-beam { animation:spin var(--duration) ease-in-out infinite; }
.effect-fade-light .light-beam { background:white; }
.is-playing .effect-fade-light .light-beam { animation:fade-light var(--duration) ease-in-out infinite; }
@keyframes light-flash { 0%,30%,100%{opacity:0} 55%{opacity:.65} }
@keyframes light-hard-flash { 0%,43%,56%,100%{opacity:0} 44%,55%{opacity:1} }
@keyframes light-double { 0%,34%,45%,58%,69%,100%{opacity:0} 35%,44%,59%,68%{opacity:.9} }
@keyframes light-strobe { 0%,18%,23%,41%,48%,72%,78%,100%{opacity:.05} 19%,22%,42%,47%,73%,77%{opacity:.9} }
@keyframes glow-up { 0%,100%{opacity:.05;transform:scale(.5)} 60%{opacity:1;transform:scale(1.2)} }
@keyframes after-glow { 0%{opacity:1;transform:scale(.8)} 100%{opacity:0;transform:scale(1.6)} }
@keyframes radial-light { 0%{opacity:0;transform:scale(.2)} 40%{opacity:1} 100%{opacity:0;transform:scale(1.6)} }
@keyframes wave-light { 0%,100%{transform:translateX(-5px) scaleX(.9)} 50%{transform:translateX(5px) scaleX(1.1)} }
@keyframes flare-move { 0%,100%{transform:translate(-55px,28px)} 50%{transform:translate(45px,-30px)} }
@keyframes scan-light { to{transform:translateX(700%)} }
@keyframes ring-light { 0%{opacity:0;transform:scale(.3)} 35%{opacity:1} 100%{opacity:0;transform:scale(4)} }
@keyframes fade-light { 0%,100%{opacity:.05} 50%{opacity:.92} }

/* Camera and 3D samples */
.preview-camera { overflow:hidden; background:linear-gradient(#d8e2e5,#f7f6f1); perspective:320px; }
.camera-photo { position:absolute; z-index:3; inset:-8%; width:116%; height:116%; max-width:none; object-fit:cover; transform-origin:center; }
.preview-camera.has-photo .camera-grid,
.preview-camera.has-photo .camera-cube { display:none; }
.preview-camera.has-photo .camera-frame { inset:9%; border-color:rgba(255,255,255,.55); box-shadow:0 0 0 1px rgba(23,36,58,.18); }
.camera-sprite { inset:0 auto auto 0; width:400%; height:200%; object-fit:fill; }
.camera-grid { position:absolute; inset:52% -20% -20%; background-image:linear-gradient(rgba(23,36,58,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(23,36,58,.18) 1px,transparent 1px); background-size:18px 18px; transform:rotateX(58deg); transform-origin:top; }
.camera-cube { position:relative; z-index:3; width:48px; height:48px; border:2px solid var(--ink); background:var(--pink); box-shadow:12px 12px 0 #94d6e6; transform-style:preserve-3d; }
.camera-cube i { position:absolute; inset:9px; border:1px solid rgba(23,36,58,.65); }
.camera-frame { position:absolute; z-index:6; inset:13%; border:1px solid rgba(23,36,58,.25); border-radius:5px; }
.camera-frame::before,.camera-frame::after { content:""; position:absolute; background:rgba(23,36,58,.22); }
.camera-frame::before { left:50%; top:0; width:1px; height:100%; }.camera-frame::after { top:50%; left:0; height:1px; width:100%; }
.camera-foreground { position:absolute; z-index:5; left:-20%; bottom:12%; width:44%; height:38%; border-radius:50%; background:rgba(23,36,58,.18); filter:blur(3px); }
.is-playing .effect-dolly-in .camera-cube,.is-playing .effect-crash-zoom .camera-cube,.is-playing .effect-subject-in .camera-cube { animation:camera-in var(--duration) ease-in-out infinite alternate; }
.is-playing .effect-dolly-out .camera-cube,.is-playing .effect-rapid-out .camera-cube,.is-playing .effect-subject-out .camera-cube { animation:camera-out var(--duration) ease-in-out infinite alternate; }
.is-playing .effect-crash-zoom .camera-cube,.is-playing .effect-rapid-out .camera-cube { animation-timing-function:cubic-bezier(.8,0,.9,.2); }
.is-playing .effect-vertigo .camera-cube { animation:camera-in var(--duration) ease-in-out infinite alternate; }
.is-playing .effect-vertigo .camera-grid { animation:grid-out var(--duration) ease-in-out infinite alternate; }
.is-playing .effect-rack-focus .camera-cube { animation:rack-focus var(--duration) ease-in-out infinite; }
.is-playing .effect-rotate-y .camera-cube,.is-playing .effect-turntable .camera-cube,.is-playing .effect-half-y .camera-cube { animation:cube-y var(--duration) linear infinite; }
.is-playing .effect-rotate-x .camera-cube { animation:cube-x var(--duration) linear infinite; }
.is-playing .effect-rotate-z .camera-cube,.is-playing .effect-camera-roll .camera-frame { animation:spin var(--duration) linear infinite; }
.is-playing .effect-cube .camera-cube { animation:cube-3d var(--duration) ease-in-out infinite; }
.is-playing .effect-arc .camera-cube { animation:arc-camera var(--duration) ease-in-out infinite; }
.is-playing .effect-pan-right .camera-cube { animation:pan-right var(--duration) ease-in-out infinite; }
.is-playing .effect-pan-left .camera-cube { animation:pan-left var(--duration) ease-in-out infinite; }
.is-playing .effect-tilt-up .camera-cube { animation:tilt-up var(--duration) ease-in-out infinite; }
.is-playing .effect-tilt-down .camera-cube { animation:tilt-down var(--duration) ease-in-out infinite; }
.effect-low-angle .camera-grid { transform:rotateX(72deg) scale(1.4); }.effect-high-angle .camera-grid { inset:25% -20% -10%; transform:rotateX(36deg); }
.effect-over-shoulder .camera-foreground { left:-8%; bottom:10%; width:55%; height:58%; background:#667286; }
.is-playing .effect-handheld .camera-frame { animation:handheld calc(var(--duration)/5) steps(2) infinite; }
.is-playing .effect-parallax .camera-cube { animation:pan-right var(--duration) ease-in-out infinite; }
.is-playing .effect-parallax .camera-foreground { animation:pan-left calc(var(--duration)/1.5) ease-in-out infinite; }
.is-playing .effect-background-drift .camera-grid { animation:bg-drift var(--duration) linear infinite; }
.is-playing .effect-foreground-pass .camera-foreground { animation:foreground-pass var(--duration) linear infinite; }
.is-playing .effect-layered-depth .camera-cube { animation:pan-right var(--duration) ease-in-out infinite; }.is-playing .effect-layered-depth .camera-grid { animation:bg-drift calc(var(--duration)*2) linear infinite; }
.is-playing .effect-card-tilt .camera-cube { animation:card-3d var(--duration) ease-in-out infinite; }
.is-playing .effect-tunnel .camera-frame { animation:tunnel var(--duration) ease-in-out infinite; }
.is-playing .effect-depth-focus .camera-cube { animation:rack-focus var(--duration) ease-in-out infinite; }
.is-playing .effect-plane-rise .camera-cube { animation:plane-rise var(--duration) ease-in-out infinite; }
.is-playing .effect-dolly-in .camera-photo,
.is-playing .effect-subject-in .camera-photo { animation:photo-dolly-in var(--duration) ease-in-out infinite alternate; }
.is-playing .effect-crash-zoom .camera-photo { animation:photo-dolly-in var(--duration) cubic-bezier(.8,0,.9,.2) infinite alternate; }
.is-playing .effect-dolly-out .camera-photo,
.is-playing .effect-subject-out .camera-photo { animation:photo-dolly-out var(--duration) ease-in-out infinite alternate; }
.is-playing .effect-rapid-out .camera-photo { animation:photo-dolly-out var(--duration) cubic-bezier(.8,0,.9,.2) infinite alternate; }
.is-playing .effect-vertigo .camera-photo { animation:photo-vertigo var(--duration) ease-in-out infinite alternate; }
.is-playing .effect-rack-focus .camera-photo,
.is-playing .effect-depth-focus .camera-photo { animation:photo-rack-focus var(--duration) ease-in-out infinite; }
.is-playing .effect-rotate-y .camera-sprite,
.is-playing .effect-rotate-x .camera-sprite,
.is-playing .effect-turntable .camera-sprite,
.is-playing .effect-half-y .camera-sprite { animation:turntable-sprite var(--duration) steps(1,end) infinite; }
.is-playing .effect-rotate-z .camera-sprite { animation:turntable-sprite-roll var(--duration) steps(1,end) infinite; }
.is-playing .effect-cube .camera-photo,
.is-playing .effect-card-tilt .camera-photo,
.is-playing .effect-plane-rise .camera-photo { animation:photo-card-3d var(--duration) ease-in-out infinite; }
.is-playing .effect-camera-roll .camera-photo { animation:photo-roll var(--duration) ease-in-out infinite; }
.is-playing .effect-arc .camera-photo { animation:photo-arc var(--duration) ease-in-out infinite; }
.is-playing .effect-pan-right .camera-photo { animation:photo-pan-right var(--duration) ease-in-out infinite; }
.is-playing .effect-pan-left .camera-photo { animation:photo-pan-left var(--duration) ease-in-out infinite; }
.is-playing .effect-tilt-up .camera-photo { animation:photo-tilt-up var(--duration) ease-in-out infinite; }
.is-playing .effect-tilt-down .camera-photo { animation:photo-tilt-down var(--duration) ease-in-out infinite; }
.is-playing .effect-handheld .camera-photo { animation:handheld calc(var(--duration)/5) steps(2) infinite; }
.is-playing .effect-parallax .camera-photo,
.is-playing .effect-layered-depth .camera-photo { animation:photo-parallax var(--duration) ease-in-out infinite; }
.is-playing .effect-background-drift .camera-photo { animation:photo-pan-left calc(var(--duration)*1.5) linear infinite; }
.is-playing .effect-foreground-pass .camera-photo { animation:photo-pan-right calc(var(--duration)*1.4) ease-in-out infinite; }
.is-playing .effect-tunnel .camera-photo { animation:photo-tunnel var(--duration) ease-in-out infinite; }
@keyframes camera-in { from{transform:scale(.45) translateY(-10px)} to{transform:scale(1.45) translateY(8px)} }
@keyframes camera-out { from{transform:scale(1.45)} to{transform:scale(.4)} }
@keyframes grid-out { from{background-size:12px 12px} to{background-size:30px 30px} }
@keyframes rack-focus { 0%,100%{filter:blur(5px);transform:scale(.95)} 45%,60%{filter:none;transform:scale(1.05)} }
@keyframes cube-y { to{transform:rotateY(360deg)} } @keyframes cube-x { to{transform:rotateX(360deg)} }
@keyframes cube-3d { 0%,100%{transform:rotateX(0) rotateY(0)} 50%{transform:rotateX(45deg) rotateY(180deg)} }
@keyframes arc-camera { 0%,100%{transform:translateX(-35px) rotateY(-25deg)} 50%{transform:translateX(35px) rotateY(25deg)} }
@keyframes pan-right { 0%,100%{transform:translateX(-45px)} 50%{transform:translateX(45px)} }
@keyframes pan-left { 0%,100%{transform:translateX(45px)} 50%{transform:translateX(-45px)} }
@keyframes tilt-up { 0%,100%{transform:translateY(32px)} 50%{transform:translateY(-32px)} }
@keyframes tilt-down { 0%,100%{transform:translateY(-32px)} 50%{transform:translateY(32px)} }
@keyframes handheld { 0%,100%{transform:translate(-2px,1px) rotate(-.8deg)} 50%{transform:translate(2px,-1px) rotate(.8deg)} }
@keyframes bg-drift { to{background-position:36px 0} }
@keyframes foreground-pass { from{transform:translateX(-100px)} to{transform:translateX(310px)} }
@keyframes card-3d { 0%,100%{transform:rotateX(-15deg) rotateY(-22deg)} 50%{transform:rotateX(16deg) rotateY(22deg)} }
@keyframes tunnel { 0%,100%{transform:scale(.55);opacity:.3} 50%{transform:scale(1.22);opacity:1} }
@keyframes plane-rise { 0%,100%{transform:rotateX(85deg) translateY(20px)} 50%{transform:rotateX(0) translateY(0)} }
@keyframes photo-dolly-in { from{transform:scale(1)} to{transform:scale(1.28)} }
@keyframes photo-dolly-out { from{transform:scale(1.3)} to{transform:scale(.92)} }
@keyframes photo-vertigo { from{transform:scale(1.02);filter:none} to{transform:scale(1.28);filter:saturate(.8) contrast(1.08)} }
@keyframes photo-rack-focus { 0%,100%{filter:blur(4px);transform:scale(1.03)} 45%,62%{filter:none;transform:scale(1.11)} }
@keyframes photo-roll { 0%,100%{transform:scale(1.2) rotate(-7deg)} 50%{transform:scale(1.2) rotate(7deg)} }
@keyframes photo-arc { 0%,100%{transform:scale(1.12) translateX(-5%) rotateY(-6deg)} 50%{transform:scale(1.12) translateX(5%) rotateY(6deg)} }
@keyframes photo-pan-right { 0%,100%{transform:scale(1.14) translateX(-5%)} 50%{transform:scale(1.14) translateX(5%)} }
@keyframes photo-pan-left { 0%,100%{transform:scale(1.14) translateX(5%)} 50%{transform:scale(1.14) translateX(-5%)} }
@keyframes photo-tilt-up { 0%,100%{transform:scale(1.14) translateY(5%)} 50%{transform:scale(1.14) translateY(-5%)} }
@keyframes photo-tilt-down { 0%,100%{transform:scale(1.14) translateY(-5%)} 50%{transform:scale(1.14) translateY(5%)} }
@keyframes photo-parallax { 0%,100%{transform:scale(1.1) translateX(-3%)} 50%{transform:scale(1.16) translateX(3%)} }
@keyframes photo-tunnel { 0%,100%{transform:scale(1)} 50%{transform:scale(1.3)} }
@keyframes photo-card-3d { 0%,100%{transform:scale(.9) rotateX(-10deg) rotateY(-12deg)} 50%{transform:scale(.96) rotateX(10deg) rotateY(12deg)} }
@keyframes turntable-sprite {
  0%,12.4%{transform:translate(0,0)} 12.5%,24.9%{transform:translate(-25%,0)} 25%,37.4%{transform:translate(-50%,0)} 37.5%,49.9%{transform:translate(-75%,0)}
  50%,62.4%{transform:translate(0,-50%)} 62.5%,74.9%{transform:translate(-25%,-50%)} 75%,87.4%{transform:translate(-50%,-50%)} 87.5%,100%{transform:translate(-75%,-50%)}
}
@keyframes turntable-sprite-roll {
  0%,24.9%{transform:translate(0,0) rotate(-5deg)} 25%,49.9%{transform:translate(-50%,0) rotate(5deg)} 50%,74.9%{transform:translate(0,-50%) rotate(-5deg)} 75%,100%{transform:translate(-50%,-50%) rotate(5deg)}
}

/* Web and LP expression samples */
.preview-web { padding:13px; background:#dce5e7; }
.mini-browser { width:92%; height:86%; overflow:hidden; border:1px solid #758195; border-radius:7px; background:#fff; box-shadow:0 6px 14px rgba(23,36,58,.16); }
.mini-bar { height:13px; display:flex; align-items:center; gap:3px; padding-left:6px; background:#edf0f2; }
.mini-bar i { width:4px;height:4px;border-radius:50%;background:#9aa3af; }
.mini-page { position:relative; height:calc(100% - 13px); padding:12px; overflow:hidden; background:linear-gradient(135deg,#fff,#f5f3ed); }
.mini-title,.mini-copy,.mini-button,.mini-card { position:absolute; display:block; border-radius:3px; }
.mini-title { left:12px; top:14px; width:56%; height:8px; background:var(--ink); }
.mini-copy { left:12px; top:29px; width:43%; height:4px; background:#aab2bd; box-shadow:0 8px #c3c8ce; }
.mini-button { left:12px; top:51px; width:34%; height:13px; background:var(--pink); }
.mini-media { position:absolute; right:10px; top:13px; width:37%; height:45px; display:grid; place-items:center; border-radius:4px; color:white; background:#24344d; font-size:12px; }
.mini-card { left:12px; right:10px; bottom:9px; height:20px; border:1px solid #bdc3ca; background:white; }
.is-playing .effect-bg-fade .mini-page { animation:bg-fade var(--duration) ease-in-out infinite; }
.effect-bg-gradient .mini-page { background:linear-gradient(120deg,#f8c7bc,#e3f1bd,#b9deeb); background-size:260% 100%; }.is-playing .effect-bg-gradient .mini-page { animation:gradient-flow var(--duration) linear infinite; }
.is-playing .effect-bg-zoom .mini-page { animation:bg-zoom var(--duration) ease-in-out infinite alternate; }
.effect-bg-particles .mini-page { background-image:radial-gradient(circle,var(--pink) 0 2px,transparent 3px); background-size:18px 20px; }.is-playing .effect-bg-particles .mini-page { animation:bg-drift var(--duration) linear infinite; }
.effect-bg-glow .mini-page { background:radial-gradient(circle at 20% 30%,rgba(255,121,104,.55),transparent 35%),#fff; }.is-playing .effect-bg-glow .mini-page { animation:bg-glow var(--duration) ease-in-out infinite alternate; }
.effect-bg-split .mini-page { background:linear-gradient(90deg,#d7f1ef 50%,#ffe0d8 50%); }.is-playing .effect-bg-split .mini-page { animation:bg-split var(--duration) ease-in-out infinite; }
.effect-bg-texture .mini-page { background:repeating-linear-gradient(0deg,#faf8f1 0 3px,#eeeae0 4px); }.is-playing .effect-bg-texture .mini-page { animation:bg-drift var(--duration) linear infinite; }
.effect-video-overlay .mini-media { inset:0;width:auto;height:auto;border-radius:0;background:linear-gradient(rgba(23,36,58,.5),rgba(23,36,58,.5)),linear-gradient(120deg,#5db7d6,#17243a); }
.is-playing .effect-reveal-up .mini-title,.is-playing .effect-reveal-up .mini-copy,.is-playing .effect-reveal-up .mini-button { animation:float-up var(--duration) ease-out infinite; }
.is-playing .effect-reveal-side .mini-title { animation:slide-left var(--duration) ease-out infinite; }.is-playing .effect-reveal-side .mini-media { animation:slide-right var(--duration) ease-out infinite; }
.effect-sticky-section .mini-title,.effect-sticky-title .mini-title { top:5px; background:var(--pink); }.is-playing .effect-sticky-section .mini-page,.is-playing .effect-sticky-title .mini-page { animation:mini-scroll var(--duration) linear infinite; }
.is-playing .effect-horizontal-scroll .mini-card { width:70%; right:auto; box-shadow:68px 0 white,136px 0 white; animation:horizontal-mini var(--duration) linear infinite; }
.effect-counter .mini-title::after { content:"128"; position:absolute; inset:-5px auto auto 0; padding:3px; background:white; font:900 15px/1 ui-monospace,monospace; }.is-playing .effect-counter .mini-title::after { animation:counter var(--duration) steps(4) infinite; }
.is-playing .effect-line-reveal .mini-copy { animation:wipe-right var(--duration) steps(5) infinite; }
.effect-accordion .mini-card { height:9px; box-shadow:0 -13px white,0 -13px 0 1px #bdc3ca,0 -26px white,0 -26px 0 1px #bdc3ca; }.is-playing .effect-accordion .mini-card { animation:faq-open var(--duration) ease-in-out infinite; }
.effect-video-embed .mini-media,.effect-video-card .mini-media,.effect-video-tabs .mini-media,.effect-scroll-video .mini-media { left:10px;right:10px;top:9px;width:auto;height:58%; }
.effect-video-card .mini-media { box-shadow:0 7px 12px rgba(23,36,58,.25); }
.is-playing .effect-image-mask .mini-media { animation:wipe-right var(--duration) ease-in-out infinite; }
.is-playing .effect-image-hover .mini-media { animation:bg-zoom var(--duration) ease-in-out infinite alternate; }
.effect-before-after .mini-media { background:linear-gradient(90deg,#24344d 50%,#ff7968 50%); }.is-playing .effect-before-after .mini-media::after { content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;background:white;animation:compare var(--duration) ease-in-out infinite; }
.effect-video-tabs .mini-card { left:auto;right:10px;width:37%;height:6px;bottom:5px;box-shadow:-45px 0 #5db7d6,-90px 0 #c3c8ce; }
.is-playing .effect-scroll-video .mini-media { animation:mini-scroll-video var(--duration) linear infinite; }
.is-playing .effect-image-3d .mini-media { animation:card-3d var(--duration) ease-in-out infinite; transform-style:preserve-3d; }
.is-playing .effect-button-lift .mini-button { animation:button-lift var(--duration) ease-in-out infinite; }
.effect-button-shine .mini-button { overflow:hidden; }.effect-button-shine .mini-button::after { content:"";position:absolute;inset:-20% auto -20% -40%;width:25%;background:rgba(255,255,255,.8);transform:skewX(-20deg); }.is-playing .effect-button-shine .mini-button::after { animation:button-shine var(--duration) linear infinite; }
.is-playing .effect-card-tilt .mini-card { animation:card-3d var(--duration) ease-in-out infinite; }
.is-playing .effect-card-border .mini-card { animation:draw-box var(--duration) ease-in-out infinite; }
.effect-card-stack .mini-card { box-shadow:4px 4px #c9f36b,8px 8px #5db7d6; }.is-playing .effect-card-stack .mini-card { animation:card-stack var(--duration) ease-in-out infinite; }
.effect-price-highlight .mini-card { left:33%;right:33%;height:50%;background:#fff;border:2px solid var(--pink); }.is-playing .effect-price-highlight .mini-card { animation:pulse var(--duration) ease-in-out infinite; }
.is-playing .effect-faq-open .mini-card { animation:faq-open var(--duration) ease-in-out infinite; }
.effect-sticky-cta .mini-button { left:5%;right:5%;top:auto;bottom:5px;width:auto;height:17px; }.is-playing .effect-sticky-cta .mini-page { animation:mini-scroll var(--duration) linear infinite; }
@keyframes bg-fade { 0%,100%{background-color:#fff} 50%{background-color:#dceef3} }
@keyframes bg-zoom { from{transform:scale(1)} to{transform:scale(1.16)} }
@keyframes bg-glow { from{background-position:0 0} to{background-position:50px 20px} }
@keyframes bg-split { 0%,100%{background-size:100% 100%} 50%{background-size:160% 100%} }
@keyframes mini-scroll { from{transform:translateY(0)} to{transform:translateY(-18px)} }
@keyframes horizontal-mini { from{transform:translateX(0)} to{transform:translateX(-130px)} }
@keyframes counter { 0%{content:"0"} 33%{content:"42"} 66%{content:"86"} 100%{content:"128"} }
@keyframes faq-open { 0%,100%{height:9px} 50%{height:34px} }
@keyframes compare { 0%,100%{left:22%} 50%{left:78%} }
@keyframes mini-scroll-video { from{transform:scale(.7)} to{transform:scale(1.08)} }
@keyframes button-lift { 0%,100%{transform:none;box-shadow:0 0 0 rgba(23,36,58,0)} 50%{transform:translateY(-5px);box-shadow:0 7px 10px rgba(23,36,58,.25)} }
@keyframes button-shine { to{transform:translateX(330%) skewX(-20deg)} }
@keyframes card-stack { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-5px,-5px);box-shadow:9px 9px #c9f36b,18px 18px #5db7d6} }

@media (max-width: 760px) {
  .result-bar { align-items:flex-start; flex-direction:column; }
  .result-actions { width:100%; align-items:flex-start; flex-direction:column; gap:8px; }
  .speed-control { align-self:stretch; justify-content:center; }
}