/* Sample-only hero film: transient layers move with transforms and opacity. */
.murmur-demo { min-width: 0; scroll-margin-top: 110px; }
.murmur-demo figcaption { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; color: #d1c8e6; font-size: 11px; margin-bottom: 18px; min-height: 32px; }
.demo-caption-label { grid-column: 2; display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.preview-dot { width: 6px; height: 6px; background: #baaaff; border-radius: 50%; flex: none; }
.demo-playback { grid-column: 3; justify-self: end; display: flex; gap: 3px; }
.demo-playback button { display: grid; place-items: center; background: #211c3440; border: 1px solid #b5a6ff35; border-radius: 8px; width: 29px; height: 29px; padding: 6px; color: #cfc4e5; }
.demo-playback button:hover { background: #403252; }
.demo-playback svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.demo-play-icon { display: none; }
[data-paused="true"] .demo-pause-icon { display: none; }
[data-paused="true"] .demo-play-icon { display: block; }
.demo-canvas { position: relative; height: 485px; isolation: isolate; pointer-events: none; }
.demo-desktop-window { position: absolute; left: 50%; top: 7px; width: calc(100% - 244px); min-width: 0; height: 445px; background: #101522; border: 1px solid #716680; border-radius: 15px; box-shadow: 0 20px 45px #07041360; transform: translateX(-50%); transition: opacity 300ms ease, transform 400ms ease; }
[data-dictionary="true"] .demo-desktop-window { transform: translateX(calc(-50% - 122px)); }
.demo-app-toolbar { height: 49px; border-bottom: 1px solid #343c51; background: #1b2234; border-radius: 14px 14px 0 0; padding: 11px 13px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.demo-app-toolbar img { width: 90px; height: auto; }
.demo-app-actions { display: flex; align-items: center; gap: 8px; color: #aaa3c2; font-size: 14px; flex: none; }
.demo-app-actions .icon { width: 15px; height: 15px; }
.demo-app-actions .mock-window-controls .icon { width: 12px; height: 12px; }
.demo-translate-control { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border: 1px solid #665775; border-radius: 8px; font-size: 10px; line-height: 1.4; color: #d2c7e4; background: #28253a; }
.demo-translate-tip { position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%); padding: 5px 8px; border: 1px solid #756588; border-radius: 6px; background: #242335; color: #ede4fa; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 160ms ease; }
[data-translation-hover="true"] .demo-translate-control { border-color: #beaae6; background: #403451; }
[data-translation-hover="true"] .demo-translate-tip { opacity: 1; visibility: visible; }
[data-translation-enabled="true"] .demo-translate-control { color: #e3d7ff; border-color: #bca4ee; background: #4b3a68; }
.demo-transcript { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; padding: 20px 14px; }
.demo-turn { position: relative; width: fit-content; max-width: 80%; min-width: 0; border: 1px solid #383e5b; border-radius: 12px; background: #22263d; padding: 12px 14px; text-align: left; overflow-wrap: anywhere; transition: opacity 220ms ease; }
.demo-turn-es { align-self: flex-end; background: #2e2735; border-color: #5b4657; }
.demo-language { font-size: 9px; letter-spacing: .12em; display: block; line-height: 1.6; }
.demo-lang-en { color: #aebaff; }
.demo-lang-es { color: #edc67d; }
.demo-turn p { color: #f3f0fc; font-size: 15px; line-height: 1.6; margin-top: 4px; }
.demo-below-translation { border-top: 1px solid #77708550; margin-top: 10px; padding-top: 8px; }
.demo-below-translation p { color: #c9c5d3; font-size: 13px; margin-top: 3px; }
.demo-below-translation .demo-language { display: inline; margin-right: 7px; }
.demo-below-translation p { display: inline; }
.demo-glossary-term { position: relative; border-radius: 3px; }
.demo-glossary-tip { opacity: 0; visibility: hidden; position: absolute; z-index: 5; top: calc(100% + 10px); left: -70px; width: 235px; padding: 12px; border: 1px solid #847198; border-radius: 11px; background: #20283b; box-shadow: 0 10px 22px #08071680; color: #d9d3e4; font-size: 12px; line-height: 1.6; transform: translateY(5px); transition: opacity 160ms ease, transform 160ms ease; }
.demo-tip-pair { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; font-size: 12px; color: #fff; }
.demo-tip-pair > span { color: #efd2a0; }
.demo-tip-pair .icon { height: 14px; width: 14px; margin-left: auto; color: #cbb9ef; }
.demo-app-bottom { position: absolute; bottom: 0; inset-inline: 0; height: 37px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 13px; border-top: 1px solid #353b4d; border-radius: 0 0 14px 14px; background: #1b2234; color: #b9b1cb; font-size: 9px; }
.demo-app-bottom > span:first-child { display: flex; align-items: center; gap: 5px; }
.demo-app-bottom i { width: 4px; height: 4px; border-radius: 50%; background: #bab2ed; }
.demo-mic .icon { width: 14px; height: 14px; color: #d3c2ff; }
.demo-dictionary-window { position: absolute; top: 157px; right: 0; width: 218px; background: #131927; border: 1px solid #887394; border-radius: 14px; box-shadow: 0 20px 40px #07041370; opacity: 0; visibility: hidden; transform: translate(14px, 5px); transition: opacity 250ms ease, transform 350ms ease; }
.demo-dictionary-heading { display: flex; align-items: center; gap: 7px; padding: 8px 12px; background: #20263a; border-bottom: 1px solid #494259; border-radius: 13px 13px 0 0; font-size: 11px; line-height: 1.4; }
.demo-dictionary-heading > .icon { width: 14px; height: 14px; color: #c7b7ff; }
.demo-dictionary-heading > span { margin-left: auto; color: #aaa0bb; font-size: 14px; }
.demo-dictionary-body { padding: 10px; }
.demo-dictionary-search { display: flex; align-items: center; gap: 7px; padding: 6px 9px; border: 1px solid #61556e; border-radius: 8px; font-size: 11px; line-height: 1.4; }
.demo-dictionary-search .icon { width: 12px; height: 12px; color: #a99ac1; }
.demo-dictionary-local { display: block; font-size: 9px; line-height: 1.4; color: #b8adca; margin: 7px 1px; }
.demo-meaning { border: 1px solid #46435e; background: #1c2437; border-radius: 9px; padding: 8px; }
.demo-meaning > strong { display: block; font-size: 12px; line-height: 1.4; margin-top: 4px; color: white; }
.demo-meaning p { font-size: 11px; line-height: 1.55; color: #dad5e5; margin: 4px -3px 0; padding: 2px 3px; border-radius: 4px; transition: background-color 240ms ease; }
.demo-meaning-equivalent { display: block; color: #b6c2ff; margin: 6px -3px 0; padding: 2px 3px; border-radius: 4px; font-size: 13px; line-height: 1.4; transition: background-color 240ms ease; }
.demo-meaning-equivalent small { font-size: 9px; letter-spacing: .1em; margin-right: 5px; }
.demo-meaning-equivalent[lang="es"] { color: #edc67d; }
.demo-part-of-speech { display: block; font-size: 9px; line-height: 1.4; color: #b2a6c2; margin-top: 4px; }
.demo-pointer { position: absolute; z-index: 6; left: 0; top: 0; width: 22px; height: 27px; opacity: 0; transform: translate(40px, 350px); transition: transform 650ms cubic-bezier(.25,.7,.25,1), opacity 180ms ease; }
.demo-pointer svg { width: 22px; height: 27px; }
.demo-pointer i { position: absolute; left: -9px; top: -9px; width: 22px; height: 22px; border: 2px solid #cfb4ff; border-radius: 50%; opacity: 0; }
[data-click="true"] .demo-pointer i { animation: demo-click 500ms ease-out both; }
@keyframes demo-click { 0% { opacity: .8; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.5); } }
.demo-step { color: #c6b7d4; text-align: center; font-size: 11px; line-height: 1.6; min-height: 18px; margin-top: 10px; }
.demo-description { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-demo-ready="true"][data-window="false"] .demo-desktop-window { opacity: 0; transform: translate(-50%, 15px) scale(.98); }
[data-demo-ready="true"] [data-demo-turn][data-visible="false"] { display: none; }
[data-demo-ready="true"] [data-demo-translation][data-visible="false"] { display: none; }
[data-glossary="true"] .demo-glossary-tip { opacity: 1; visibility: visible; transform: translateY(0); }
[data-dictionary="true"] .demo-dictionary-window { opacity: 1; visibility: visible; transform: translate(0, 0); }
[data-mode="movie"][data-dictionary="true"] .demo-lookup-term { background: #7e6bb060; outline: 1px solid #bda2fa; border-radius: 2px; }
[data-emphasis="definition"] [data-demo-target="definition"] { background: #7866ac55; color: #fff; }
[data-emphasis="equivalent"] [data-demo-target="equivalent"] { background: #9a733653; }
[data-pointer="true"] .demo-pointer { opacity: 1; }
[data-fading="true"] .demo-canvas { opacity: 0; transition: opacity 400ms ease; }
[data-paused="true"] .demo-pointer i { animation-play-state: paused; }
@media (min-width: 1101px) {
  .murmur-hero > .wrap { grid-template-columns: .8fr 1.2fr; gap: 38px; }
  .murmur-hero h1 { font-size: clamp(42px, 3.9vw, 59px); }
  .murmur-page:lang(es) .murmur-hero h1 { font-size: clamp(42px, 3.7vw, 56px); }
}
@media (max-width: 1100px) {
  .murmur-hero > .wrap { grid-template-columns: 1fr; gap: 45px; }
  .murmur-hero-copy { max-width: 650px; }
  .murmur-demo { width: min(700px, 100%); margin-inline: auto; }
  .demo-dictionary-window { width: 225px; }
}
@media (min-width: 601px) and (max-width: 800px) {
  .demo-desktop-window { width: 100%; }
  [data-dictionary="true"] .demo-desktop-window { transform: translateX(-50%); }
  .demo-dictionary-window { top: 198px; }
}
@media (max-width: 600px) {
  .murmur-page:lang(es) .murmur-hero h1 { font-size: clamp(30px, 9.4vw, 44px); }
  .murmur-demo figcaption { grid-template-columns: 1fr; font-size: 10px; gap: 6px; }
  .demo-caption-label { grid-column: 1; }
  .demo-playback { grid-column: 1; justify-self: center; gap: 2px; }
  .demo-playback button { width: 27px; height: 27px; }
  .demo-canvas { height: 555px; }
  .demo-desktop-window { left: 0; width: 100%; height: 475px; transform: none; }
  [data-dictionary="true"] .demo-desktop-window { transform: none; }
  .demo-app-toolbar { height: 45px; padding: 10px; }
  .demo-app-toolbar img { width: 80px; }
  .demo-app-actions { gap: 5px; }
  .demo-app-actions .mock-window-controls .icon { width: 11px; height: 11px; }
  .demo-transcript { padding: 16px 11px; gap: 14px; }
  .demo-turn { padding: 10px 12px; }
  .demo-turn p { font-size: 14px; }
  .demo-below-translation p { font-size: 12px; }
  .demo-glossary-tip { width: 208px; left: -90px; font-size: 11px; }
  .demo-tip-pair { font-size: 11px; }
  .demo-dictionary-window { top: 278px; width: 224px; right: 1px; transform: translateY(12px); }
  [data-dictionary="true"] .demo-dictionary-window { transform: none; }
  [data-demo-ready="true"][data-window="false"] .demo-desktop-window { transform: translateY(12px) scale(.98); }
}
.demo-word { font: inherit; line-height: inherit; color: inherit; vertical-align: baseline; display: inline; padding: 0; margin: 0; background: transparent; border: 0; border-radius: 2px; text-align: inherit; }
.demo-word.demo-glossary-term { color: #aebaff; background: #8696ff24; border-bottom: 1px dotted #8696ff; }
.demo-word.demo-date-term { color: #f4d49d; background: #66512c30; border-bottom: 1px dotted #d8b87a; }
.demo-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.demo-tools-toggle { display: grid; place-items: center; width: 27px; height: 27px; padding: 5px; border: 1px solid transparent; border-radius: 7px; color: #c5bada; background: transparent; }
.demo-dictionary-heading > button { margin-left: auto; width: 22px; height: 22px; padding: 0; border: 0; background: transparent; color: #c8bad8; font-size: 18px; line-height: 1; }
.demo-dictionary-heading > strong { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.demo-tool-tabs, .demo-workspace-only { display: none; }
.demo-dictionary-search input { width: 100%; min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: #ede7f6; font: inherit; line-height: inherit; }
.demo-dictionary-search input:focus { outline: none; }
.demo-dictionary-search:focus-within { border-color: #c9b3fb; }
.demo-dictionary-search > button { display: none; border: 0; background: transparent; padding: 0; color: #cdb8ed; }
.demo-dictionary-search > button .icon { width: 15px; height: 15px; }
.demo-playback .demo-try-button { width: auto; padding-inline: 8px; font-size: 10px; }
[data-mode="interactive"] .demo-canvas { pointer-events: auto; }
[data-mode="interactive"] .demo-pointer { display: none; }
[data-mode="interactive"] .demo-dictionary-window { top: 90px; max-height: 370px; display: flex; flex-direction: column; }
[data-mode="interactive"][data-dictionary="false"] .demo-dictionary-window { display: none; }
[data-mode="interactive"] .demo-dictionary-heading, [data-mode="interactive"] .demo-tool-tabs { flex: none; }
[data-mode="interactive"] .demo-tool-tabs { display: flex; justify-content: space-around; gap: 3px; padding: 6px; border-bottom: 1px solid #474057; }
.demo-tool-tabs > button { display: grid; place-items: center; flex: none; width: 31px; height: 31px; padding: 7px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #b9aacf; }
.demo-tool-tabs .icon { width: 16px; height: 16px; }
.demo-tool-tabs [aria-selected="true"], .demo-tools-toggle[aria-expanded="true"] { background: #433551; border-color: #8a72a6; color: #e1cfff; }
[data-mode="interactive"] .demo-workspace-only { display: block; }
[data-mode="interactive"] .demo-dictionary-search > button { display: grid; place-items: center; }
[data-mode="interactive"] .demo-dictionary-body, .demo-tool-panel { overflow: auto; min-height: 0; }
.demo-tool-panel { padding: 12px; }
[data-mode="interactive"] button.demo-word:hover:not(.demo-glossary-term), .demo-word[data-selected="true"] { background: #8171af50; outline: 1px solid #b59bd7; }
[data-mode="interactive"] .demo-translate-control:hover, [data-mode="interactive"] .demo-tools-toggle:hover { border-color: #beaae6; }
[data-mode="interactive"] .demo-tip-pair .icon { display: none; }
.demo-not-found, .demo-sample-note { color: #bfb1ce; font-size: 10px; line-height: 1.6; margin-top: 10px; }
.demo-word-suggestions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.demo-word-suggestions button { padding: 4px 6px; border: 1px solid #6c587b; border-radius: 7px; background: #2d263b; color: #dcc8f0; font-size: 10px; }
.demo-glossary-entry { display: flex; flex-wrap: wrap; gap: 4px 8px; padding-block: 12px; border-bottom: 1px solid #4c405d; font-size: 12px; }
.demo-glossary-entry:first-child { padding-top: 0; }
.demo-glossary-entry > span { color: #edc67d; }
.demo-glossary-entry p { color: #c7bed0; font-size: 11px; line-height: 1.7; }
.demo-notes-wrap { position: relative; }
.demo-notes-wrap textarea { display: block; width: 100%; height: 170px; resize: none; padding: 10px 10px 36px; border: 1px solid #796289; border-radius: 10px; background: #131927; color: #f3edf8; font: 12px/1.7 var(--font-body); }
.demo-notes-wrap textarea::placeholder { color: #a99aba; }
.demo-notes-wrap > button { position: absolute; bottom: 6px; right: 6px; border: 0; border-radius: 5px; padding: 3px 5px; background: #1c1b2d; color: #c4b4d4; font-size: 10px; }
.demo-notes-wrap > button:disabled { opacity: .4; cursor: default; }
.demo-script-languages { display: flex; gap: 4px; margin-bottom: 10px; }
.demo-script-languages button { padding: 4px 8px; border: 1px solid #655176; border-radius: 7px; background: #211d31; color: #c6b7d6; font-size: 10px; }
.demo-script-languages [aria-pressed="true"] { background: #514064; color: #fff; }
.demo-script-text { font-size: 12px; line-height: 1.9; color: #ded3e9; }
.demo-script-search { display: flex; align-items: center; gap: 7px; padding: 6px 8px; border: 1px solid #6c597d; border-radius: 8px; }
.demo-script-search .icon { width: 13px; height: 13px; color: #beadce; }
.demo-script-search input { width: 100%; min-width: 0; border: 0; padding: 0; background: transparent; color: #e8dff1; font: 11px/1.5 var(--font-body); }
.demo-script-search input:focus { outline: none; }
.demo-script-search:focus-within { border-color: #cbb2ee; }
.demo-script-search input::placeholder { color: #b8a8c7; }
.demo-script-library { margin-top: 10px; }
.demo-script-library details { margin-bottom: 5px; }
.demo-script-library summary { padding: 7px 3px; font-size: 11px; font-weight: 600; list-style: none; cursor: pointer; color: #cfc0df; }
.demo-script-library summary::before { content: "›"; display: inline-block; width: 12px; margin-right: 3px; }
.demo-script-library details[open] > summary::before { transform: rotate(90deg); }
.demo-script-library [data-demo-script-open] { display: flex; align-items: center; gap: 7px; width: calc(100% - 10px); margin-left: 10px; padding: 7px; border: 0; border-radius: 7px; background: transparent; color: #eee3f6; font-size: 11px; text-align: left; }
.demo-script-library [data-demo-script-open]:hover { background: #483952; }
.demo-script-library [data-demo-script-open] .icon { width: 13px; height: 13px; color: #beace9; }
.demo-script-reader-header { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 5px; align-items: center; margin-bottom: 12px; }
.demo-script-reader-header > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; line-height: 1.4; }
.demo-script-reader-header .demo-script-languages { margin: 0; gap: 2px; }
.demo-script-reader-header .demo-script-languages button { padding: 3px 5px; font-size: 9px; }
.demo-script-back { width: 22px; height: 24px; padding: 0; border: 1px solid #695277; border-radius: 6px; background: #2b2337; color: #e6d6f2; }
.demo-script-text { white-space: pre-line; }
.demo-timer-label, .demo-timer-state { font-size: 11px; color: #cbb7dc; }
.demo-timer-display { display: block; font-size: 32px; color: #ddc5ff; font-variant-numeric: tabular-nums; margin-block: 7px; }
.demo-timer-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.demo-timer-actions button { padding: 6px 10px; border: 1px solid #8c72a5; border-radius: 8px; background: #42324f; color: #f1e4ff; font-size: 11px; }
@media (max-width: 800px) {
  [data-mode="interactive"] .demo-canvas { height: auto; min-height: 490px; }
  [data-mode="interactive"] .demo-desktop-window { position: relative; left: 0; width: 100%; transform: none; }
  [data-mode="interactive"][data-dictionary="true"] .demo-desktop-window { transform: none; }
  [data-mode="interactive"] .demo-dictionary-window { position: relative; top: auto; right: auto; width: 100%; margin-top: 22px; max-height: 370px; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-desktop-window, .demo-dictionary-window, .demo-glossary-tip, .demo-pointer, .demo-meaning p, .demo-meaning-equivalent { transition: none; }
  .demo-pointer { display: none; }
}