/* Shared editorial components, with Frame Studio's own visual language. */
@import url('./cinepulse.css?v=5');

.frame-studio-page {
  --cs-amber: #b99af4;
  --cs-black: #19171e;
  --cs-panel: #222027;
  --cs-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-purple: #7354a2;
  --fs-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
.frame-studio-page main .cs-section h2,
.frame-studio-page main .cs-reflection h2 { color: var(--color-ink); font-size: clamp(2.1rem, 4.3vw, 3.4rem); line-height: 1.04; font-weight: 550; letter-spacing: -0.06em; }
.frame-studio-page .cs-title-dot { color: var(--fs-purple); }
.frame-studio-page .cs-index { color: #70538f; }
.frame-studio-page .cs-tool-list > span { background: #eee8f5; border-color: #d7cce5; color: #5b4874; }
.frame-studio-page .cs-hero { padding: 2.25rem 2.6rem 1rem; border-color: #443b55; background: radial-gradient(ellipse at 0 0, #51406b 0, transparent 58%), #1a1820; }
.frame-studio-page .cs-hero::before { width: 42%; height: 18rem; border-color: #b99af421; background: linear-gradient(120deg, transparent, #b99af409); }
.frame-studio-page .cs-hero-format { color: #d0bfe8; }
.frame-studio-page .cs-hero-message { margin-bottom: 2.25rem; }
.frame-studio-page .cs-hero-note { color: #c4bdd0; }
.frame-studio-page .cs-hero-composition { padding: 0.5rem 3% 3.5rem 0; }
.frame-studio-page .cs-hero-screen { width: 94%; border-color: #71627f; transform: rotate(-1.3deg); }
.frame-studio-page .cs-hero-screen:hover { transform: translateY(-0.2rem) rotate(-1.3deg); }
.frame-studio-page .cs-window-bar { background: #29252f; border-color: #413a4a; color: #c1b6ce; }
.fs-hero-motion { position: absolute; right: 0; bottom: 0; width: 39%; z-index: 2; padding: 0.35rem; overflow: hidden; border: 1px solid #947dad; border-radius: 0.65rem; background: #24202c; box-shadow: 0 1rem 2.5rem #0006; transform: rotate(3deg); }
.fs-hero-motion video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0.35rem; background: #3e315c; }
.fs-hero-motion figcaption { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.55rem 0.25rem 0.15rem; color: #d9c9ee; font-size: 0.46rem; }
.fs-hero-motion figcaption > span { display: flex; align-items: center; gap: 0.4rem; }
.fs-loop-toggle { display: grid; place-items: center; min-width: 2rem; min-height: 1.8rem; border: 1px solid #665476; border-radius: 0.25rem; color: #eee5f7; font-size: 0.48rem; }
.fs-loop-toggle[hidden] { display: none; }
.fs-hero-label { position: absolute; bottom: 0.6rem; left: 0.5rem; display: flex; align-items: center; gap: 0.7rem; color: #d3c5e6; }
.fs-hero-label svg { width: 1.5rem; height: 1.5rem; }
.frame-studio-page .cs-hero-baseline { color: #c4b7d3; }
.frame-studio-page .cs-chapters a:hover,
.frame-studio-page .cs-chapters a[aria-current='location'] { color: var(--fs-purple); }
.frame-studio-page .cs-chapters a[aria-current='location'] span { color: var(--fs-purple); }
.frame-studio-page .cs-zoom-link:focus-visible { outline-color: var(--fs-purple); }
.frame-studio-page .cs-workflow-tabs { background: #eae5ee; border-color: #d6cddd; }
.frame-studio-page .cs-workflow-tabs button:hover { background: #dfd7e7; }
.frame-studio-page .cs-workflow-tabs button[aria-selected='true']:hover { background: #2d2638; }
.frame-studio-page .cs-workflow-panel { background: #efeaf2; border-color: #d6cddd; }
.frame-studio-page .cs-workflow-description .cs-mono { color: #715487; }
.frame-studio-page .cs-workflow-screen { align-items: center; justify-content: center; background: #19171e; border-color: #d6cddd; height: 27rem; max-height: none; }
.frame-studio-page .cs-workflow-screen img { width: 100%; height: 100%; object-fit: contain; }
.frame-studio-page .cs-workflow-panel:not([hidden]) { animation: fs-panel-in 350ms var(--fs-ease) both; }
@keyframes fs-panel-in { from { opacity: 0.3; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
.fs-storyboard { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 0.5rem; }
.fs-storyboard a { display: block; overflow: hidden; border: 1px solid #c8b8d7; border-radius: 0.5rem; }
.fs-storyboard img { display: block; width: 100%; height: auto; }
.fs-storyboard figcaption { display: flex; align-items: baseline; gap: 0.65rem; margin-top: 0.7rem; color: #56475f; font-size: 0.7rem; }
.fs-storyboard figcaption > span { color: #896a9f; font-family: var(--cs-mono); font-size: 0.5rem; }
.fs-build { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem clamp(2rem, 6vw, 5rem); align-items: start; }
.fs-build-lede { margin-top: 1.3rem; color: #5e615b; font-size: 0.85rem; line-height: 1.8; }
.fs-build-lede + .fs-build-lede { margin-top: 0.85rem; }
.fs-build-visual { padding: 1.3rem; overflow: hidden; color: #f6f1ff; border: 1px solid #4f3f64; border-radius: 0.7rem; background: radial-gradient(ellipse at 100% 0, #695181, transparent 65%), #2a2334; }
.fs-build-visual-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; color: #d4bcec; margin-bottom: 1.4rem; }
.fs-code-mark { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border: 1px solid #bda2d45c; border-radius: 50%; font-family: var(--cs-mono); font-size: 0.72rem; color: #e7d5fa; }
.fs-build-visual > a { display: block; overflow: hidden; border: 1px solid #947dad; border-radius: 0.35rem; transform: rotate(-2deg); box-shadow: 0 0.8rem 1.6rem #140d2250; }
.fs-build-visual > a img { display: block; width: 100%; height: auto; }
.fs-build-visual figcaption { display: flex; align-items: center; gap: 0.7rem; margin-top: 1.4rem; color: #d0c2dd; font-size: 0.64rem; line-height: 1.6; }
.fs-build-visual figcaption > img { width: 2.2rem; height: 2.2rem; }
.fs-build-visual figcaption strong { color: #f3edfa; font-weight: 550; }
.fs-build-visual figcaption > .cs-mono { margin-left: auto; color: #bba7cf; font-size: 0.42rem; }
.fs-build-steps { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; padding-top: 2rem; border-top: 1px solid var(--color-line); }
.fs-build-steps .cs-mono { color: #73578f; }
.fs-step-icon { display: block; width: 2.6rem; height: 2.6rem; margin-bottom: 1rem; color: #73578f; }
.fs-build-steps h3 { margin-top: 0.8rem; color: #37343c; font-size: 0.86rem; font-weight: 600; }
.fs-motion-intro { display: grid; grid-template-columns: 1fr 0.8fr; gap: 3rem; align-items: end; }
.fs-motion-intro > p { color: #65606b; font-size: 0.83rem; line-height: 1.8; }
.fs-motion-lab { margin-top: 2.1rem; border: 1px solid #43374e; border-radius: 0.7rem; overflow: hidden; background: #211c29; }
.fs-motion-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.15rem; color: #d9c7ea; }
.fs-motion-toolbar > .cs-mono { font-size: 0.48rem; }
.fs-motion-video-wrap { margin: 0 1.15rem; border: 1px solid #5d4d6e; border-radius: 0.35rem; overflow: hidden; background: #131015; aspect-ratio: 16 / 9; }
.fs-motion-video-wrap video { display: block; width: 100%; height: 100%; object-fit: contain; }
.fs-motion-caption { display: flex; align-items: start; justify-content: space-between; gap: 1.5rem; padding: 1rem 1.15rem 1.1rem; color: #d3c4e0; font-size: 0.64rem; line-height: 1.7; }
.fs-motion-caption > span { color: #b6a4c9; font-size: 0.48rem; flex-shrink: 0; }
.fs-motion-fallback { display: inline-flex; min-height: 2.3rem; align-items: center; color: #644b80; margin-top: 0.4rem; font-size: 0.65rem; text-decoration: underline; text-underline-offset: 0.2em; }
.fs-motion-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; margin-top: 2rem; }
.fs-motion-details > div { border-top: 1px solid #d7cfe0; padding-top: 1rem; }
.fs-motion-details .cs-mono { color: #755991; }
.fs-motion-details h3 { margin-top: 0.5rem; color: #38333e; font-size: 0.88rem; font-weight: 600; }
.fs-motion-details p { margin-top: 0.5rem; color: #6c6673; font-size: 0.72rem; line-height: 1.8; }
.fs-outcome { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 2.5rem clamp(2rem, 6vw, 5rem); align-items: center; }
.fs-outcome-copy > p:not(.cs-index) { margin-top: 1.3rem; color: #5e615b; font-size: 0.85rem; line-height: 1.8; }
.fs-outcome .cs-output-specs dt { color: #706879; }
.fs-outcome .cs-output-specs dd { color: #4b4255; }
.fs-outcome-screen { max-width: 13rem; width: 90%; justify-self: center; }
.fs-outcome-screen > a { display: block; overflow: hidden; border: 1px solid #796789; border-radius: 0.65rem; transform: rotate(2deg); box-shadow: 0 1rem 2rem #3c234b18; }
.fs-outcome-screen img { display: block; width: 100%; height: auto; }
.fs-outcome-screen figcaption { margin-top: 0.85rem; color: #70617c; font-size: 0.55rem; text-align: center; }
.fs-outcome-copy .fs-scope-note { font-size: 0.7rem; color: #716977; }
.fs-outcome-copy .cs-text-link { color: #70518e; font-size: 0.7rem; }
.fs-identity { grid-column: 1 / -1; display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem; margin-top: 1rem; }
.fs-identity-lockup { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.7rem; border-radius: 0.6rem; color: #f6f0fe; background: #211c29; }
.fs-identity-lockup .cs-brand > img { width: 3rem; height: 3rem; }
.fs-identity-lockup .cs-brand > span { font-size: 1.7rem; }
.fs-identity-lockup > p { max-width: 8rem; color: #c5b6d4; font-size: 0.6rem; line-height: 1.75; }
.fs-identity-swatches { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; border-radius: 0.6rem; border: 1px solid #d8cfe0; }
.fs-identity-swatches > div { display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; padding: 1.2rem 0.7rem; font-size: 0.6rem; }
.fs-identity-swatches code { font-family: var(--cs-mono); font-size: 0.46rem; }
.fs-identity-swatches > div:nth-child(1) { background: #b99af4; color: #30213f; }
.fs-identity-swatches > div:nth-child(2) { background: #19171e; color: #eee7f5; }
.fs-identity-swatches > div:nth-child(3) { background: #f7f5f0; color: #48404f; }
.frame-studio-page .cs-reflection .cs-index { color: #70538f; }
.frame-studio-page .cs-image-dialog { background: #211c29; border-color: #655271; }
.frame-studio-page .cs-dialog-top > .cs-mono { color: #d0b6e6; }
.frame-studio-page .cs-dialog-close { border-color: #6b527b; }
.frame-studio-page:has(.cs-image-dialog[open]) { overflow: hidden; }

@media (max-width: 1000px) {
  .frame-studio-page .cs-hero { padding: 1.7rem 1.7rem 0.9rem; }
  .frame-studio-page .cs-workflow-screen { height: 25rem; }
  .fs-build-steps { gap: 1rem; }
  .fs-identity-lockup { flex-direction: column; align-items: start; }
  .fs-identity-lockup > p { max-width: none; }
}
@media (max-width: 767px) {
  .frame-studio-page .cs-hero { padding: 1.3rem 1rem 0.8rem; }
  .frame-studio-page .cs-hero-message { margin-bottom: 1.5rem; }
  .frame-studio-page .cs-hero-composition { padding-bottom: 4rem; padding-right: 0; }
  .frame-studio-page .cs-hero-screen { width: 97%; }
  .fs-hero-motion { width: 49%; }
  .fs-hero-label { left: 0; bottom: 0.75rem; max-width: 40%; gap: 0.4rem; font-size: 0.42rem; }
  .fs-hero-label svg { flex-shrink: 0; width: 1rem; height: 1rem; }
  .fs-hero-motion figcaption { font-size: 0.38rem; gap: 0.1rem; }
  .fs-loop-toggle { min-width: 1.5rem; min-height: 1.5rem; font-size: 0.38rem; }
  .fs-build, .fs-motion-intro, .fs-outcome { grid-template-columns: 1fr; gap: 1.75rem; }
  .fs-build-steps { grid-template-columns: 1fr 1fr; gap: 1.75rem 1.5rem; }
  .frame-studio-page .cs-workflow-screen { height: 21rem; }
  .fs-motion-intro > p { max-width: 33rem; }
  .fs-motion-toolbar { flex-direction: column; align-items: start; gap: 0.6rem; padding: 0.8rem; }
  .fs-motion-video-wrap { margin-inline: 0.6rem; }
  .fs-motion-caption { flex-direction: column; gap: 0.4rem; padding-inline: 0.8rem; }
  .fs-motion-details { gap: 1rem; }
  .fs-motion-details h3 { font-size: 0.77rem; }
  .fs-motion-details p { font-size: 0.67rem; }
  .fs-identity { grid-template-columns: 1fr; }
  .fs-identity-lockup { flex-direction: row; align-items: center; }
  .fs-identity-lockup .cs-brand > span { font-size: 1.35rem; }
  .fs-identity-lockup .cs-brand > img { width: 2.5rem; height: 2.5rem; }
  .fs-identity-lockup > p { max-width: 8rem; }
}
@media (max-width: 480px) {
  .frame-studio-page .cs-hero-composition { padding-bottom: 3.9rem; }
  .fs-hero-motion { width: 55%; }
  .fs-hero-label { max-width: 36%; font-size: 0.36rem; }
  .frame-studio-page .cs-hero-baseline { font-size: 0.34rem; }
  .frame-studio-page .cs-workflow-screen { height: 17rem; }
  .fs-build-steps { gap: 1.5rem 1rem; }
  .fs-motion-details { grid-template-columns: 1fr; gap: 1.3rem; }
  .fs-motion-details h3 { font-size: 0.88rem; }
  .fs-motion-details p { font-size: 0.75rem; }
  .fs-identity-lockup { flex-direction: column; align-items: start; }
  .fs-identity-lockup > p { max-width: none; }
  .fs-storyboard { grid-template-columns: none; grid-auto-columns: 88%; grid-auto-flow: column; overflow-x: auto; padding-bottom: 0.65rem; scroll-snap-type: x proximity; scrollbar-width: thin; }
  .fs-storyboard figure { scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) {
  .frame-studio-page .cs-workflow-panel:not([hidden]) { animation: none; }
  .frame-studio-page .cs-hero-screen { transition: none; }
  .frame-studio-page .cs-hero-screen:hover { transform: rotate(-1.3deg); }
}