/* Keep this card content-sized, with the recording experience close enough to
   see. It shares a row with read-along, without stretching a narrow screenshot. */
.reading-features{align-items:start}
.reading-features .voice-feature{display:flex;flex-direction:column;gap:24px;max-height:none;padding:32px 28px;background:#eee1db}
.voice-feature-copy p{max-width:38ch}
.voice-idea-demo{margin:0;padding:19px 20px 15px;border:1px solid #dfcfc1;border-radius:20px;background:#fcfaf8;box-shadow:0 8px 20px #503f3306;min-width:0}
.voice-demo-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:36px}
.voice-demo-heading>span{font-size:.64rem;font-weight:650;letter-spacing:.1em;color:#67766b}
.voice-demo-toggle{flex:none;min-height:36px;padding:5px 10px;border:1px solid #d2dacf;border-radius:20px;background:transparent;font-size:.75rem;color:#345e53;line-height:1.2}
.voice-demo-toggle[hidden]{display:none}
.voice-demo-toggle:hover{background:#e8eee5}
.voice-demo-scene{display:grid;grid-template-columns:minmax(110px,150px) minmax(0,1fr);gap:18px;align-items:center;margin:8px 0 16px}
.voice-recorder-closeup{position:relative;overflow:hidden;border-radius:50%;aspect-ratio:640/620;isolation:isolate}
.reading-feature .voice-recorder-closeup img,.voice-recorder-closeup video{display:block;width:100%;height:100%;max-width:none;object-fit:cover;box-shadow:none;border-radius:0}
.voice-recorder-closeup video{position:absolute;inset:0;opacity:0;pointer-events:none}
.voice-recorder-closeup video.is-playing{opacity:1}
.voice-idea-quote>span{font-size:.57rem;letter-spacing:.1em;color:#7b776b;font-weight:650}
.voice-idea-quote blockquote{margin:7px 0 13px;font:1.5rem/1.3 Story,Georgia,serif;letter-spacing:-.025em;color:#244b43}
.voice-demo-status{display:flex;align-items:center;gap:7px;font-size:.65rem;line-height:1.5;color:#527569}
.voice-demo-status i{flex:none;width:6px;height:6px;border-radius:50%;background:#63947c}
[data-voice-state=recording] .voice-demo-status{color:#a2473c}
[data-voice-state=recording] .voice-demo-status i{background:#c56152;animation:voice-dot 1s ease-in-out infinite}
@keyframes voice-dot{50%{box-shadow:0 0 0 4px #c5615220}}
.voice-saved-part{display:flex;gap:11px;align-items:center;padding:12px;border:1px solid #dce4d9;border-radius:13px;background:#edf1e8;transition:opacity 220ms,transform 220ms}
.voice-part-icon{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:#346358;color:#fff8e8;font-size:.85rem}
.voice-saved-part strong{display:block;font-size:.8rem;font-weight:600;color:#345e53}
.voice-saved-part div>span{display:block;font-size:.66rem;color:#617269;margin-top:1px}
.voice-part-time{margin-left:auto;font:500 .72rem ui-monospace,monospace;color:#55756a}
[data-voice-state=ready] .voice-saved-part,[data-voice-state=recording] .voice-saved-part{opacity:.32;transform:translateY(3px)}
.voice-idea-demo figcaption{position:static;margin-top:12px;font-size:.64rem;color:#727b72;line-height:1.5;text-align:center}
@media(min-width:761px) and (max-width:1100px){.voice-demo-scene{grid-template-columns:105px minmax(0,1fr);gap:7px}.voice-idea-quote blockquote{font-size:1.3rem}.voice-idea-demo{padding:15px 13px}.voice-demo-heading>span{font-size:.56rem}}
@media(max-width:760px){.reading-features .voice-feature{padding:28px;gap:22px}.voice-demo-scene{grid-template-columns:minmax(110px,170px) minmax(0,1fr);gap:22px}.voice-idea-quote blockquote{font-size:1.7rem}}
@media(max-width:480px){.reading-features .voice-feature{padding:27px 24px}.voice-idea-demo{padding:15px 13px 13px}.voice-demo-scene{grid-template-columns:minmax(96px,.9fr) minmax(0,1.1fr);gap:6px}.voice-idea-quote blockquote{font-size:1.3rem}.voice-demo-heading>span{font-size:.54rem}.voice-demo-toggle{font-size:.68rem;padding:5px 8px}.voice-idea-quote>span{font-size:.5rem}.voice-demo-status{font-size:.6rem}.voice-saved-part{gap:8px;padding:10px}.voice-saved-part div>span{font-size:.61rem}}