/* Product walkthrough: one main window, connected references, adaptable workspace. */
.murmur-hero .murmur-actions { justify-content: center; }
.product-walkthrough, .product-tools-section { scroll-margin-top: 0; }
.murmur-features.product-walkthrough { padding-bottom: 32px; }
.feature-tools-layout { display: grid; align-items: center; gap: clamp(50px, 6vw, 95px); }
.feature-main-heading { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(50px, 6vw, 95px); align-items: end; margin-bottom: 44px; }
.feature-main-heading h2, .feature-tools-copy h2 { margin-top: 13px; }
.feature-main-heading .feature-intro { margin-top: 0; padding-bottom: 4px; }
.feature-scenes-layout { display: grid; grid-template-columns: minmax(185px,.23fr) minmax(0,1fr); gap: 23px; align-items: stretch; }
.feature-scene-tabs { display: grid; gap: 18px; }
.feature-scenes-layout { --scene-accent: #b6b9ff; --scene-tint: #272443; }
[data-feature-scene="glossary"], [data-feature-scene-panel="glossary"] { --scene-accent: #a7c8ff; --scene-tint: #223149; }
[data-feature-scene="details"], [data-feature-scene-panel="details"] { --scene-accent: #edca8b; --scene-tint: #392e2b; }
[data-feature-scene="translation"], [data-feature-scene-panel="translation"] { --scene-accent: #d1b0ee; --scene-tint: #35263f; }
.feature-scene-tabs button { position: relative; display: grid; grid-template-columns: 38px minmax(0,1fr) 16px; align-items: center; gap: 11px; min-width: 0; min-height: 100px; padding: 17px 15px; text-align: left; color: #d4cce3; background: #121124; border: 1px solid #65597565; border-radius: 18px 29px 18px 29px; font-size: 14px; font-weight: 650; line-height: 1.5; }
.feature-scene-tabs button:nth-child(1) { --scene-tilt: -1.2deg; }
.feature-scene-tabs button:nth-child(2) { --scene-tilt: -.4deg; }
.feature-scene-tabs button:nth-child(3) { --scene-tilt: .4deg; }
.feature-scene-tabs button:nth-child(4) { --scene-tilt: 1.2deg; }
.feature-scene-tabs button:hover { border-color: var(--scene-accent); }
.feature-scene-tabs [aria-selected="true"] { border-color: var(--scene-accent); background: linear-gradient(125deg,var(--scene-tint),#161426); color: #f1eafb; }
.feature-scene-tabs [aria-selected="true"]::before { content: ""; position: absolute; left: 0; top: 25%; bottom: 25%; width: 3px; border-radius: 0 3px 3px 0; background: var(--scene-accent); }
.feature-scene-tab-icon { width: 38px; height: 42px; display: flex; align-items: center; justify-content: center; border: 1px solid color-mix(in srgb,var(--scene-accent) 38%,transparent); border-radius: 13px 18px 13px 18px; color: var(--scene-accent); background: var(--scene-tint); }
.feature-scene-tab-icon .icon { width: 21px; height: 21px; }
.feature-scene-tabs button > .icon { width: 16px; height: 16px; color: var(--scene-accent); }
.feature-scene-panels { min-width: 0; }
.feature-scene-panel { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); align-items: center; gap: 30px; min-height: 470px; padding: 29px; border: 1px solid #71618380; border-radius: 33px 24px 33px 24px; background: radial-gradient(ellipse at 15% 15%,var(--scene-tint),#131224 75%); }
.feature-scene-waves { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: .1; overflow: hidden; border-radius: inherit; }
.feature-scene-waves path { fill: none; stroke: var(--scene-accent); stroke-width: 1; }
.feature-scene-copy { min-width: 0; }
.feature-scene-eyebrow { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--scene-accent); }
.feature-scene-eyebrow .icon { width: 17px; height: 17px; flex: none; }
.feature-scene-copy h3 { font-size: clamp(25px,2.3vw,32px); line-height: 1.25; letter-spacing: -.035em; color: #f1edfa; margin-top: 16px; }
.feature-scene-copy > p { font-size: 15px; line-height: 1.85; color: #d7d0e4; margin-top: 19px; }
.feature-scene-detail { display: flex; align-items: flex-start; gap: 8px; border-top: 1px solid #73638140; padding-top: 17px; margin-top: 22px; color: #cec6de; font-size: 14px; line-height: 1.8; }
.feature-scene-detail > .icon { width: 17px; height: 17px; flex: none; margin-top: 4px; color: var(--scene-accent); }
.feature-highlight-types { display: flex; flex-wrap: wrap; gap: 9px 8px; list-style: none; margin: 22px 0 0; padding: 17px 0 0; border-top: 1px solid #73638140; }
.feature-highlight-types mark { display: inline-block; padding: 2px 6px; border-radius: 3px; border-bottom: 1px dotted #c5a364; background: #e8bd6620; color: #f1d59b; font-size: 14px; line-height: 1.65; }
.feature-intro { color: #cbc4dc; font-size: 16px; line-height: 1.85; margin-top: 22px; max-width: 560px; }
.feature-tool-descriptions h3 { color: #f0eafa; font-size: 21px; }
.feature-tool-descriptions p { color: #c7bed8; font-size: 15px; line-height: 1.85; margin-top: 12px; }
.feature-tool-descriptions small { display: block; font-size: 12px; line-height: 1.8; color: #ac9cbe; margin-top: 15px; }

.feature-reading-figure { min-width: 0; }
.feature-tools-figure > figcaption { color: #ab9abc; font-size: 11px; line-height: 1.5; text-align: center; margin-bottom: 16px; }
.feature-reading-window { position: relative; display: grid; grid-template-rows: 52px minmax(0,1fr) 43px; height: 410px; background: #101522; border: 1px solid #726780; border-radius: 19px; box-shadow: 0 25px 65px #03020b70; overflow: visible; }
.feature-window-bar { height: 52px; display: flex; align-items: center; gap: 12px; padding: 11px 16px; background: #1b2234; border-radius: 18px 18px 0 0; border-bottom: 1px solid #383c51; }
.feature-window-bar > img { width: 95px; height: auto; }
.feature-language-pair { margin-left: auto; font-size: 9px; letter-spacing: .08em; color: #a9a2bc; white-space: nowrap; }
.feature-window-bar > .mock-window-controls { margin-left: auto; }
.feature-translation-state { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; border: 1px solid #645675; padding: 5px 7px; border-radius: 7px; color: #c6bbd7; }
.feature-translation-state .icon { width: 14px; height: 14px; }
.feature-translation-state { background: #252137; }
.feature-translation-state[aria-pressed] { position: relative; background: #7a5bb1; border-color: #bda2ef; color: #fff; padding: 7px 9px; box-shadow: inset 0 1px 0 #ffffff24; }
.feature-translation-state[aria-pressed]::after { content: ""; width: 7px; height: 7px; flex: none; border: 1px solid #e1cfff; border-radius: 50%; margin-left: 2px; }
.feature-translation-state[aria-pressed="true"] { background: #d2b9ff; color: #20162f; border-color: #eadbff; }
.feature-translation-state[aria-pressed="true"]::after { background: #38234f; border-color: #38234f; }
.feature-translation-state::before { content: ""; position: absolute; inset: -4px; border: 1px solid #ccb0ff; border-radius: inherit; pointer-events: none; opacity: 0; }
.feature-reading-stream { min-height: 0; overflow-y: auto; overscroll-behavior: auto; scrollbar-width: thin; scrollbar-color: #655b7a transparent; padding: 22px 14px; display: flex; flex-direction: column; gap: 15px; justify-content: flex-start; }
.feature-call-bubble { position: relative; flex: none; align-self: flex-start; border: 1px solid #454060; border-radius: 13px; width: fit-content; max-width: 80%; min-width: 0; padding: 14px 15px; background: #21263b; text-align: left; overflow-wrap: anywhere; transition: opacity 180ms ease; }
.feature-call-bubble[data-caption-empty="true"] { opacity: 0; }
.feature-call-es { align-self: flex-end; background: #2b2434; border-color: #604759; }
.feature-original, .feature-target { font-size: 10px; line-height: 1.4; }
.feature-bubble-meta { display: flex; align-items: center; gap: 12px; }
.feature-bubble-meta > span, .feature-target > span { font-size: 10px; letter-spacing: .12em; }
.feature-en { color: #b0bfff; }
.feature-es { color: #e8c783; }
.feature-call-bubble p { color: #f2eefb; font-size: 14px; line-height: 1.7; margin-top: 4px; }
.feature-target { border-top: 1px solid #73648360; padding-top: 9px; margin-top: 12px; }
.feature-target p { font-size: 12px; color: #d2c9de; }
[data-feature-scene-panel="translation"] .feature-reading-stream { padding-block: 16px; gap: 12px; }
[data-feature-scene-panel="translation"] .feature-call-bubble { padding: 11px 12px; }
.feature-bubble-translate { position: relative; margin-left: auto; border: 0; padding: 0 2px; background: transparent; color: #c8bbdb; font: 10px/1.3 var(--font-body); letter-spacing: normal; white-space: nowrap; cursor: pointer; }
.feature-bubble-translate::after { content: ""; position: absolute; inset: -3px; border: 1px solid #c9adf1; border-radius: 4px; background: #b79ee915; opacity: 0; pointer-events: none; }
[data-feature-visible="true"] .feature-translation-state[aria-pressed="false"]::before,
[data-feature-visible="true"] .feature-bubble-translate::after { animation: feature-inline-cue 2400ms ease-in-out infinite; }
@keyframes feature-inline-cue { 0%,100% { opacity: 0; } 50% { opacity: .65; } }
.feature-bubble-translate:hover { color: #d2b9ff; }
.feature-bubble-translate:focus-visible { outline: 1px solid #d2b9ff; outline-offset: 2px; border-radius: 2px; }

.feature-data-word { white-space: nowrap; }

.feature-glossary-word { position: relative; font: inherit; color: #b0bfff; padding: 0; border: 0; border-bottom: 1px dotted #899aff; background: #8696ff24; border-radius: 3px; cursor: help; }
.feature-glossary-word::after { content: ""; position: absolute; inset: -2px; border: 1px solid #a1baff; border-radius: 4px; background: #8aa5ff10; pointer-events: none; opacity: 0; }
[data-feature-visible="true"] [data-feature-glossary]:not([data-feature-discovered])::after { animation: feature-glossary-cue 2600ms ease-in-out var(--glossary-cue-delay,0ms) infinite; }
[data-feature-glossary="1"] { --glossary-cue-delay: 650ms; }
@keyframes feature-glossary-cue { 0%,100% { opacity: 0; transform: scale(1); } 40% { opacity: .65; transform: scale(1.04,1.12); } 70% { opacity: .15; transform: scale(1.01,1.03); } }
.feature-data-word { color: #f4d49d; background: #66512c30; border-bottom: 1px dotted #d8b87a; border-radius: 3px; }
.feature-definition-popover { position: absolute; z-index: 5; width: 260px; max-width: calc(100% - 24px); border: 1px solid #7e8bae; background: #20283b; border-radius: 11px; padding: 13px 14px; box-shadow: 0 12px 26px #03081285; }
.feature-definition-popover::before { content: ""; position: absolute; top: -5px; left: var(--feature-tip-arrow,26px); width: 8px; height: 8px; rotate: 45deg; background: #20283b; border-top: 1px solid #7e8bae; border-left: 1px solid #7e8bae; }
.feature-definition-popover[data-placement="above"]::before { top: auto; bottom: -5px; border: 0; border-right: 1px solid #7e8bae; border-bottom: 1px solid #7e8bae; }
.feature-definition-popover > div { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-right: 22px; font-size: 14px; color: #bdcfff; }
.feature-definition-popover > div > span { color: #869bbd; font-size: 11px; }
.feature-definition-popover > div > .icon { position: absolute; right: 0; top: 2px; width: 15px; height: 15px; color: #b8b8ee; }
.feature-definition-popover > p { color: #d1d9e9; font-size: 13px; line-height: 1.75; margin-top: 10px; }

.feature-window-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 15px; border-top: 1px solid #383c51; border-radius: 0 0 18px 18px; color: #b9b1cb; font-size: 10px; }
.feature-window-footer > span:first-child { display: flex; align-items: center; gap: 5px; }
.feature-window-footer i { width: 4px; height: 4px; border-radius: 50%; background: #b9a8f2; }
.feature-window-footer .icon { width: 16px; height: 16px; }
.feature-window-footer > button { border: 1px solid #726183; color: #d1c3e5; background: #2b253c; padding: 3px 7px; border-radius: 6px; font-size: 10px; }

@media (hover: hover) and (pointer: fine) {
  .feature-scene-tabs button { rotate: var(--scene-tilt); transition: rotate 220ms ease, transform 220ms ease, border-color 180ms ease; }
  .feature-scene-tabs button:is(:hover,:focus-visible,[aria-selected="true"]) { rotate: 0deg; transform: translateX(2px) scaleX(1.025); }
}

.feature-bridge { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 50px; margin-top: 42px; padding-top: 32px; border-top: 1px solid #65597545; }
.feature-bridge-copy h3 { font-size: 23px; letter-spacing: -.025em; color: #eee9f9; }
.feature-bridge-copy > p { color: #c6bdd5; font-size: 15px; line-height: 1.8; margin-top: 12px; max-width: 510px; }
.feature-bridge-example { width: min(425px,100%); justify-self: center; }
.feature-bridge-transcript { border: 1px solid #454060; border-radius: 15px 22px 15px 22px; padding: 15px 18px; background: #21263b; }
.feature-bridge-transcript > span { font-size: 10px; letter-spacing: .12em; }
.feature-bridge-transcript > p { color: #f2eefb; font-size: 15px; line-height: 1.7; margin-top: 5px; }
.feature-bridge-transcript button { font: inherit; color: inherit; padding: 0 2px; border: 0; border-bottom: 1px dotted #b7adce; border-radius: 3px; background: #b7adce12; cursor: pointer; }
.feature-bridge-transcript button:is(:hover,:focus-visible,[data-looked-up]) { color: #d5dcff; background: #8a9cff35; outline: 1px solid #a6b4ec; outline-offset: 2px; }
.feature-bridge-hint { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 11px; font-size: 12px; color: #bcb0d0; }
.feature-bridge-hint .icon { width: 16px; height: 16px; flex: none; color: #b9a7e4; }
.feature-bridge-hint > .icon:last-child { rotate: 90deg; }
.feature-dictionary-sense:focus { outline: 1px solid #a9b8f6; outline-offset: 6px; border-radius: 6px; }
.product-tools-section { position: relative; padding-block: 85px; background: radial-gradient(ellipse at 85% 40%,#50304635,transparent 65%); }
.feature-tools-layout { grid-template-columns: 1fr 1fr; }
.feature-tools-copy { grid-column: 2; grid-row: 1; }
.feature-tools-figure { grid-column: 1; grid-row: 1; }
.feature-tool-descriptions { --tool-copy-accent: #c1adf0; display: grid; position: relative; margin-top: 28px; padding: 24px 26px; border: 1px solid #8870ae75; border-left: 3px solid var(--tool-copy-accent); border-radius: 21px; background: linear-gradient(130deg,#30274080,transparent 70%),#171626; box-shadow: 0 12px 35px #04020c2b; min-height: 210px; }
.feature-tool-descriptions[data-description-tool="glossary"] { --tool-copy-accent: #afc1ff; }
.feature-tool-descriptions[data-description-tool="notes"] { --tool-copy-accent: #e5b9ca; }
.feature-tool-descriptions[data-description-tool="timers"] { --tool-copy-accent: #e9c893; }
.feature-tool-descriptions > div { grid-area: 1 / 1; min-width: 0; visibility: hidden; pointer-events: none; }
.feature-tool-descriptions > [aria-hidden="false"] { visibility: visible; pointer-events: auto; animation: feature-tool-copy-in 180ms ease-out; }
.feature-description-label { display: inline-flex; align-items: center; gap: 8px; color: var(--tool-copy-accent); font-size: 12px; font-weight: 600; margin-bottom: 13px; }
.feature-description-label .icon { width: 17px; height: 17px; }
@keyframes feature-tool-copy-in { from { opacity: .4; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.feature-tools-figure { min-width: 0; }
.feature-tools-figure > .feature-tool-invitation { display: flex; align-items: center; gap: 12px; width: fit-content; max-width: 100%; margin: 0 auto 24px; padding: 12px 16px; border: 1px solid #9d81c380; border-radius: 17px 23px 17px 23px; background: #2b223c; text-align: left; color: #e7dcf7; box-shadow: 0 6px 24px #07020d35; transition: transform 180ms ease, background 180ms ease, border-color 180ms ease; }
.feature-tool-invitation strong { display: block; color: #f1e9ff; font-size: 16px; font-weight: 700; line-height: 1.4; }
.feature-tool-invitation .feature-hover-hint, .feature-tool-invitation .feature-touch-hint { font-size: 13px; line-height: 1.65; margin-top: 3px; color: #d0c1e3; }
.feature-tool-invitation .feature-hover-hint { display: block; }
.feature-tool-invitation .feature-touch-hint { display: none; }
.feature-invitation-cursor { display: flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 40px; border-radius: 11px 15px 11px 15px; background: #5a4276; color: #eadcff; }
.feature-invitation-cursor .icon { width: 22px; height: 22px; }
.feature-invitation-arrow { display: flex; flex: none; align-items: center; color: #ceb5f4; transition: transform 180ms ease; }
.feature-invitation-arrow .icon { width: 21px; height: 21px; rotate: 90deg; }
@media (hover: hover) and (pointer: fine) {
  .feature-tools-figure > .feature-tool-invitation:hover { transform: translateY(-3px); background: #3a2b51; border-color: #c6a5ef; }
  .feature-tool-invitation:hover .feature-invitation-arrow { transform: translateY(3px); }
}
@media (hover: none), (pointer: coarse) {
  .feature-tool-invitation .feature-hover-hint { display: none; }
  .feature-tool-invitation .feature-touch-hint { display: block; }
}
.feature-tools-window { display: grid; grid-template-rows: auto auto minmax(0,1fr); height: 420px; background: #151a29; border: 1px solid #8b6f91; border-radius: 20px 35px 20px 35px; box-shadow: 0 25px 70px #07020d80; overflow: hidden; rotate: -1deg; }
.feature-tool-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; background: #24283b; border-bottom: 1px solid #51435d; }
.feature-tool-heading > span { display: flex; align-items: center; gap: 9px; font-size: 14px; }
.feature-tool-heading .icon { color: #bba7ef; width: 19px; height: 19px; }
.feature-tool-heading small { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; color: #c8b7e2; }
.feature-tool-heading small::before { content: ""; width: 5px; height: 5px; flex: none; border-radius: 50%; background: #bd9bf4; box-shadow: 0 0 0 3px #bd9bf418; }

.feature-tool-tabs { display: flex; gap: 4px; padding: 10px 12px; border-bottom: 1px solid #4e405750; }
.feature-tool-tabs button { display: flex; flex: 1; min-width: 0; align-items: center; justify-content: center; flex-direction: column; gap: 6px; padding: 9px 4px; background: #c5a9ed06; border: 1px solid #8e76b22b; border-radius: 10px; font-size: 10px; color: #c6b8dc; cursor: pointer; transition: transform 160ms ease, background 160ms ease, border-color 160ms ease; }
.feature-tool-tabs button:is(:hover,:focus-visible) { border-color: #ad8ed5; background: #39304f; color: #f0e6ff; transform: translateY(-2px); }
.feature-tool-tabs .icon { width: 19px; height: 19px; }
.feature-tool-tabs [aria-selected="true"] { border-color: #71608b; background: #39304f; color: #e1d3ff; }
.feature-tool-panel { padding: 20px; min-height: 0; overflow: auto; overscroll-behavior: auto; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: #655b7a transparent; }
.feature-tool-panel[data-feature-tool-panel="notes"] .feature-notes-wrap { height: 100%; }
.feature-tool-panel[data-feature-tool-panel="notes"] textarea { height: 100%; }
.feature-query { border: 1px solid #645772; background: #0e1420; border-radius: 10px; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; font-size: 14px; }
.feature-query .icon { width: 16px; height: 16px; color: #b09fc8; }
.feature-tool-eyebrow { font-size: 10px; color: #af9dbf; margin: 15px 0 8px; }
.feature-meaning-options { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.feature-meaning-options button { border: 1px solid #5e4e6e; border-radius: 8px; background: #201c32; padding: 6px 9px; color: #bfb3ce; font-size: 11px; }
.feature-meaning-options [aria-pressed="true"] { color: #eee4ff; background: #423258; border-color: #9c80b5; }
.feature-meaning-options button, .feature-script-choices button, .feature-timer-actions button { position: relative; }
.feature-meaning-options button::after, .feature-script-choices button::after, .feature-timer-actions button::after { content: ""; position: absolute; inset: -2px; border: 1px solid #c6a8ed; border-radius: inherit; opacity: 0; pointer-events: none; }
[data-tools-visible="true"] [data-feature-meaning][aria-pressed="false"]::after,
[data-tools-visible="true"] [data-feature-script][aria-pressed="false"]::after,
[data-tools-visible="true"] [data-status="ready"] [data-feature-timer-start]::after,
[data-tools-visible="true"] [data-status="paused"] [data-feature-timer-start]::after,
[data-tools-visible="true"] [data-status="done"] [data-feature-timer-reset]::after { animation: feature-inline-cue 2400ms ease-in-out infinite; }
.feature-dictionary-sense { background: #20283a; border: 1px solid #55485e; border-radius: 12px; padding: 12px; }
.feature-dictionary-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.feature-dictionary-term { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.feature-dictionary-term > span, .feature-equivalent > span { font-size: 9px; letter-spacing: .12em; }
.feature-dictionary-term h4 { font-size: 18px; line-height: 1.4; margin: 0; }
.feature-dictionary-term small { color: #b6a8c7; font-size: 10px; }
.feature-dictionary-sense p { color: #d4cce0; font-size: 13px; line-height: 1.7; margin-top: 7px; }
.feature-equivalent { display: flex; align-items: baseline; gap: 6px; }
.feature-equivalent strong { color: #edcf96; font-size: 14px; }
.feature-glossary-entry { padding: 19px 0; border-bottom: 1px solid #494057; }
.feature-glossary-entry:first-child { padding-top: 8px; }
.feature-glossary-entry > div { display: flex; flex-wrap: wrap; gap: 8px; font-size: 17px; }
.feature-glossary-entry > div > span { color: #8f80a2; }
.feature-glossary-entry strong { color: #b8c4ff; }
.feature-glossary-entry p { color: #c2b6ce; font-size: 13px; line-height: 1.7; margin-top: 9px; }
.feature-script-search { display: flex; align-items: center; gap: 8px; border: 1px solid #62516f; border-radius: 9px; padding: 0 10px; margin-bottom: 12px; background: #101522; color: #bba9cf; }
.feature-script-search:focus-within { border-color: #c0a5ef; outline: 1px solid #c0a5ef; }
.feature-script-search > .icon { width: 15px; height: 15px; flex: none; }
.feature-script-search input { width: 100%; min-width: 0; height: 34px; padding: 0; border: 0; outline: none; background: transparent; color: #e6dfef; font: 12px var(--font-body); }
.feature-script-search input::placeholder { color: #aa9dbb; opacity: 1; }
.feature-script-empty { color: #c5bad4; font-size: 13px; line-height: 1.7; padding-block: 8px; }
.feature-script-choices { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.feature-script-choices button { display: flex; align-items: center; text-align: left; gap: 8px; border: 1px solid #51455f; background: #201e31; border-radius: 10px; padding: 10px; color: #c5bad4; font-size: 12px; }
.feature-script-choices .icon { width: 18px; height: 18px; flex: none; }
.feature-script-choices small { display: block; font-size: 9px; color: #a99bb9; margin-bottom: 4px; }
.feature-script-choices [aria-pressed="true"] { background: #38304c; border-color: #9580b1; color: #f0e5ff; }
.feature-script-language { display: flex; justify-content: flex-end; gap: 3px; margin-block: 16px; }
.feature-script-language button { border: 1px solid #62516f; background: transparent; color: #b7a5ca; border-radius: 6px; padding: 5px 8px; font-size: 10px; }
.feature-script-language [aria-pressed="true"] { color: #171126; background: #bba9ef; }
.feature-script-body { white-space: pre-line; font-size: 15px; line-height: 1.9; color: #ddd3e7; padding: 0 5px 8px; }
.feature-notes-wrap { position: relative; }
.feature-notes-wrap textarea { display: block; width: 100%; height: 235px; resize: none; padding: 15px 16px 37px; border: 1px solid #78618c; border-radius: 13px; background: #101725; color: #e6dfef; font: 14px/1.85 var(--font-body); }
.feature-notes-wrap textarea::placeholder { color: #90849e; }
.feature-notes-wrap > button { position: absolute; bottom: 6px; right: 9px; font-size: 11px; color: #bdacd2; background: transparent; border: 0; padding: 3px 5px; }
.feature-notes-wrap > button:disabled { opacity: .45; }
.feature-timer { text-align: center; padding: 8px 0; }
.feature-timer-icon { display: inline-flex; padding: 10px; border: 1px solid #6c547c; border-radius: 14px; background: #35263e; color: #e5b9d0; }
.feature-timer-icon .icon { width: 22px; height: 22px; }
.feature-timer h4 { font-size: 13px; margin-top: 11px; font-weight: 500; color: #c9bdd5; }
.feature-countdown { display: block; font-size: 49px; line-height: 1.25; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: #eee7fa; margin-top: 8px; }
.feature-timer > p { color: #a99bb8; font-size: 11px; margin-top: 7px; }
.feature-timer[data-status="done"] :is(.feature-countdown,p) { color: #f2c99c; }
.feature-timer-actions { display: flex; justify-content: center; gap: 9px; margin-top: 16px; }
.feature-timer-actions button { border: 1px solid #78628e; background: #322940; border-radius: 9px; padding: 7px 19px; color: #e0d3ee; font-size: 12px; }
@media (max-width: 1100px) {
  .feature-main-heading { gap: 50px; }
  .feature-scenes-layout { grid-template-columns: 1fr; gap: 18px; }
  .feature-scene-tabs { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; }
  .feature-scene-tabs button { min-height: 85px; grid-template-columns: 30px minmax(0,1fr); font-size: 12px; padding: 13px; gap: 9px; border-radius: 14px 23px 14px 23px; }
  .feature-scene-tab-icon { width: 30px; height: 35px; border-radius: 11px; }
  .feature-scene-tab-icon .icon { width: 18px; height: 18px; }
  .feature-scene-tabs button > .icon { display: none; }
  .feature-scene-tabs [aria-selected="true"]::before { left: 25%; right: 25%; top: auto; bottom: 0; height: 2px; width: auto; }
  .feature-tools-layout { gap: 34px; }
  .feature-reading-stream { padding: 20px 12px; }
  .feature-tool-tabs button > span { display: none; }
  .feature-tools-window { rotate: 0deg; }
}
@media (max-width: 900px) {
  .feature-main-heading { grid-template-columns: 1fr; gap: 26px; }
  .feature-main-heading { margin-bottom: 30px; }
}
@media (max-width: 800px) {
  .feature-bridge { grid-template-columns: 1fr; gap: 23px; margin-top: 30px; padding-top: 26px; }
  .feature-bridge-copy > p { max-width: none; }
  .feature-scene-panel { grid-template-columns: 1fr; min-height: 0; gap: 24px; padding: 24px; }
  .feature-scene-copy { grid-row: 1; }
  .feature-scene-copy h3 { font-size: 27px; }
  .feature-scene-copy > p { margin-top: 12px; }
  .feature-scene-detail { margin-top: 16px; padding-top: 13px; }
  .feature-tools-layout { grid-template-columns: 1fr; gap: 30px; }
  .feature-tools-copy { grid-column: 1; grid-row: 1; }
  .feature-tools-figure { grid-column: 1; grid-row: 2; }
  .feature-tools-copy { max-width: 650px; }
  .feature-reading-figure, .feature-tools-figure { width: min(600px,100%); margin-inline: auto; }

  .feature-tool-descriptions { min-height: 170px; }
  .feature-tool-tabs button > span { display: inline; }

}
@media (max-width: 600px) {

  .murmur-features.product-walkthrough { padding-bottom: 20px; }
  .feature-bridge-copy h3 { font-size: 21px; }
  .feature-bridge-copy > p, .feature-bridge-transcript > p { font-size: 14px; }
  .product-tools-section { padding-block: 50px; }
  .feature-intro { font-size: 15px; margin-top: 17px; }
  .feature-scene-tabs { grid-template-columns: 1fr 1fr; gap: 8px; }
  .feature-scene-tabs button { min-height: 62px; padding: 10px; gap: 9px; }
  .feature-scene-panel { padding: 19px 14px; border-radius: 23px 18px 23px 18px; }
  .feature-scene-copy { padding-inline: 4px; }
  .feature-scene-copy h3 { font-size: 25px; }
  .feature-scene-copy > p { font-size: 14px; line-height: 1.8; }
  .feature-scene-detail { font-size: 13px; }
  .feature-highlight-types { margin-top: 16px; padding-top: 13px; gap: 8px; }
  .feature-highlight-types mark { font-size: 13px; }
  .feature-tool-descriptions h3 { font-size: 20px; }
  .feature-tool-descriptions { padding: 20px; border-radius: 17px; }
  .feature-tool-descriptions p { font-size: 14px; }
  .feature-window-bar { padding-inline: 12px; gap: 6px; }
  .feature-window-bar > img { width: 76px; }

  .feature-translation-state { margin-left: auto; font-size: 8px; }
  .feature-call-bubble { padding: 11px; }
  .feature-call-bubble p { font-size: 14px; }
  .feature-target p { font-size: 12px; }

  .feature-window-footer { font-size: 8px; }


  .feature-tool-heading { padding: 14px; }
  .feature-tool-heading small { font-size: 9px; }
  .feature-tool-tabs { padding: 9px; }
  .feature-tool-tabs button > span { display: none; }
  .feature-tool-tabs button { padding: 10px; }
  .feature-tool-panel { padding: 15px; }
  .feature-script-choices button { padding: 8px; font-size: 11px; }
  .feature-script-choices { grid-template-columns: 1fr 1fr; }
  .feature-script-choices button:last-child { grid-column: 1 / -1; }
  .feature-script-choices .icon { display: none; }
  .feature-glossary-entry > div { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .feature-tool-descriptions > [aria-hidden="false"] { animation: none; }
  .feature-scene-tabs button, .feature-call-bubble { transition: none; }
  .feature-translation-state::before { animation: none !important; }
  .feature-glossary-word::after { animation: none !important; }
  .feature-bubble-translate::after { animation: none !important; }
  .feature-meaning-options button::after, .feature-script-choices button::after, .feature-timer-actions button::after { animation: none !important; }

  .feature-tool-tabs button, .feature-tools-figure > .feature-tool-invitation, .feature-invitation-arrow { transition: none; }
  .feature-tools-figure > .feature-tool-invitation:hover, .feature-tool-invitation:hover .feature-invitation-arrow { transform: none; }
}