:root{--paper:#f6f8fc;--ink:#0c1630;--muted:#6b7690;--accent:#2457d6;--mint:#69e7c3;--line:#dde3ee;--ease:cubic-bezier(.32,0,.2,1);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Helvetica Neue",Arial,sans-serif;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:5px}button[hidden],[hidden]{display:none!important}
.promo{position:relative;isolation:isolate;min-height:900px;min-height:100svh;overflow:hidden;background:radial-gradient(ellipse 75% 70% at 50% 108%,#a8c8f0 0%,#d5e3f8 40%,#f6f8fc00 85%),var(--paper);padding:0 5vw;display:flex;flex-direction:column}.promo:after{content:"";position:absolute;inset:auto 0 0;height:1px;background:#7b9ac030;z-index:-1}.masthead{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1280px;margin:0 auto;padding:32px 0}.brand{display:flex;align-items:center;gap:10px;font-weight:650;font-size:19px;letter-spacing:-.5px}.brand img{border-radius:8px;box-shadow:0 2px 8px #102b6310}.platform{color:var(--muted);font-size:12px;letter-spacing:1px}.composition{width:100%;max-width:1040px;margin:auto; padding:16px 0 12px}.headline{text-align:center}.eyebrow{display:block;font-size:13px;color:#57729e;letter-spacing:4px;margin-bottom:22px}h1{margin:0;display:flex;justify-content:center;font-size:clamp(40px,6.5vw,88px);font-weight:650;letter-spacing:-.06em;line-height:1.2}.word{display:inline-block;transition:opacity .42s var(--ease),transform .42s var(--ease),color .42s var(--ease);color:var(--ink)}.word-write{color:var(--accent)}.comma,.period{letter-spacing:-.1em}.period{display:inline-block;width:.62em}.stage{position:relative;max-width:750px;margin:32px auto 0;padding:60px 30px 100px}.speech{position:absolute;top:0;left:-4%;right:-4%;min-height:48px;text-align:center;display:flex;align-items:center;justify-content:center;gap:10px;color:#647699;font-size:17px;line-height:1.7;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}.quote{font-family:Georgia,serif;font-size:36px;color:#a5b6ce}.editor{position:relative;background:#ffffffef;border:1px solid #ffffff;border-radius:16px;box-shadow:0 30px 70px -32px #294c8b60,0 2px 10px #14387308;transform:perspective(1400px) rotateX(3deg);transition:transform .48s var(--ease),box-shadow .48s;overflow:hidden}.editor-top{height:46px;display:flex;align-items:center;padding:0 20px;border-bottom:1px solid #eff2f7;color:#8d97aa;font-size:11px}.editor-top>span{position:absolute;left:50%;transform:translateX(-50%)}.lights{display:flex;gap:7px}.lights i{width:8px;height:8px;border-radius:50%;background:#e1e6ee}.editor-top svg{width:15px;height:15px;stroke:#a7b0bf;stroke-width:1.4;fill:none;margin-left:auto}.paper{padding:30px 40px 18px;min-height:225px}.note-label{font-size:10px;letter-spacing:2px;color:#a0a9b7}.note-title{font-size:23px;font-weight:600;letter-spacing:-.5px;margin-top:10px}.note-body{min-height:70px;margin-top:18px;color:#455470;font-size:17px;line-height:1.9;overflow-wrap:anywhere}.paper-lines{margin-top:10px;display:flex;flex-direction:column;gap:12px;opacity:.55}.paper-lines i{height:1px;background:linear-gradient(90deg,#e6eaf1,transparent);width:90%}.paper-lines i:last-child{width:58%}.editor-foot{height:40px;display:flex;justify-content:space-between;align-items:center;padding:0 40px;font-size:10px;color:#94a0b3}.saved{display:flex;gap:5px;align-items:center;opacity:1;transition:opacity .5s}.saved svg{width:13px;height:13px;fill:none;stroke:#6c947f;stroke-width:1.8}.note-dot{height:4px;width:4px;background:#d2dbe9;border-radius:50%}.caret{display:inline-block;height:20px;width:1.5px;background:#456cbd;vertical-align:-3px;margin-left:2px;opacity:0}.capsule-anchor{position:absolute;bottom:38px;left:50%;transform:translateX(-50%);height:40px}.capsule{height:40px;display:flex;align-items:center;justify-content:center;gap:10px;padding:0 17px;width:122px;white-space:nowrap;color:#f7faff;background:linear-gradient(120deg,#343b85,#101b35);border-radius:20px;box-shadow:0 10px 22px #1628552a,inset 0 1px 0 #ffffff1a;font-size:12px;transition:width .48s var(--ease),opacity .5s,transform .5s}/* Display layer adapted directly from capsule-states-v2.html. */
.symbol{width:27px;height:18px;position:relative;flex:none;color:var(--mint)}
.symbol>.wave,.symbol>svg{position:absolute;inset:0;margin:auto;opacity:0;transform:translateY(3px) scale(.8);transition:opacity 220ms ease,transform 360ms var(--ease)}
.wave{display:flex;align-items:center;justify-content:center;gap:3px;width:27px;height:18px;--wave-strength:0;--pulse-strength:0;transition:opacity 220ms ease,transform 360ms var(--ease),--wave-strength 360ms var(--ease),--pulse-strength 360ms ease!important}
.wave i{width:3px;flex:none;height:6px;border-radius:2px;background:#f7faff;animation:capsule-wave .9s ease-in-out infinite,capsule-pulse 1s ease-in-out infinite}
.wave i:last-child{background:var(--mint)}
.wave i:nth-child(2){animation-delay:.12s!important}.wave i:nth-child(3){animation-delay:.24s!important}.wave i:nth-child(4){animation-delay:.36s!important}.wave i:nth-child(5){animation-delay:.48s!important}
.symbol .polish{width:27px;height:18px;overflow:visible}
.polish .star{fill:var(--mint);stroke:none;transform-box:view-box;transform-origin:13.5px 9px;animation:polish-star 1.6s cubic-bezier(.45,0,.25,1) infinite}
.symbol .check{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#capsule-label{position:relative;display:block;width:60px;height:22px;line-height:22px;overflow:hidden;flex:none}
#capsule-label>span{position:absolute;inset:0;white-space:nowrap;display:flex;align-items:center}
.label-now.entering{animation:label-in 300ms var(--ease) 80ms both}.label-leaving{animation:label-out 160ms ease both;pointer-events:none}
.capsule-dot{display:none}
@property --wave-strength{syntax:'<number>';inherits:true;initial-value:0}
@property --pulse-strength{syntax:'<number>';inherits:true;initial-value:0}
@keyframes capsule-wave{0%,100%{height:calc(6px - 1px * var(--wave-strength))}50%{height:calc(6px + 12px * var(--wave-strength))}}
@keyframes capsule-pulse{0%,100%{opacity:calc(1 - .7 * var(--pulse-strength))}50%{opacity:1}}
@keyframes polish-star{0%,100%{transform:scale(.78) rotate(-15deg);opacity:.7;filter:none}42%{transform:none;opacity:1;filter:drop-shadow(0 0 2.5px #69e7c3b3)}68%{transform:scale(.93) rotate(4deg);opacity:.92;filter:drop-shadow(0 0 1.5px #69e7c366)}}
@keyframes label-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@keyframes label-out{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}
.promo:not([data-playback="playing"]) .wave i,.promo:not([data-playback="playing"]) .star,.promo:not([data-playback="playing"]) #capsule-label>span{animation-play-state:paused}
.key-hint{position:absolute;bottom:37px;right:-40px;display:flex;align-items:center;gap:10px;opacity:0;transform:translateY(5px);transition:opacity .5s,transform .5s}.key-hint kbd{display:grid;place-items:center;width:42px;height:40px;border-radius:10px;border:1px solid #d0dced;background:#f7faff;box-shadow:0 3px 0 #bfcede,0 5px 8px #6382b51a;font:15px -apple-system,sans-serif;color:#5d7497;transition:transform .18s,box-shadow .18s,background .18s}.key-label{font-size:10px;color:#7285a1;max-width:48px;line-height:1.6}.bottom{max-width:1280px;width:100%;margin:0 auto;display:flex;align-items:center;justify-content:space-between;min-height:92px;padding-bottom:18px}.signature{font-size:12px;letter-spacing:1px;color:#6a80a1}.play-controls{display:flex;gap:8px}button{display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid #7b96bb35;border-radius:30px;min-width:74px;height:36px;background:#ffffff68;color:#546b8c;font-size:11px;transition:background .2s}button:hover{background:#fff}button:disabled{opacity:.45;cursor:default}button svg{height:15px;width:15px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.timeline{position:absolute;bottom:0;left:0;right:0;height:2px;background:#5879aa0d}.timeline i{display:block;width:100%;height:100%;background:#527dc48a;transform-origin:left;transform:scaleX(1)}.accessible-result{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%)}
[data-phase="ready"] .word-speak,[data-phase="ready"] .word-write,[data-phase="listening"] .word-write,[data-phase="stop"] .word-write,[data-phase="cleanup"] .word-write{opacity:.13;transform:translateY(4px)}
[data-phase="ready"] .capsule{opacity:0;transform:translateY(6px)}[data-phase="ready"] .key-hint,[data-phase="stop"] .key-hint{opacity:1;transform:none}.key-pressed .key-hint kbd{transform:translateY(3px);box-shadow:0 0 0 #bfcede;background:#dce8fb}
[data-phase="listening"] .speech,[data-phase="stop"] .speech{opacity:1;transform:none}[data-phase="listening"] .capsule{width:160px}[data-phase="stop"] .capsule,[data-phase="cleanup"] .capsule{width:138px}[data-phase="inserting"] .capsule{width:138px}
[data-phase="listening"] .wave,[data-phase="stop"] .wave,[data-phase="inserting"] .wave{opacity:1;transform:none}
[data-phase="listening"] .wave{--wave-strength:1}
[data-phase="stop"] .wave,[data-phase="inserting"] .wave{--pulse-strength:1}
[data-phase="cleanup"] .polish,[data-phase="done"] .check{opacity:1;transform:none}
[data-phase="ready"] .saved,[data-phase="listening"] .saved,[data-phase="stop"] .saved,[data-phase="cleanup"] .saved,[data-phase="inserting"] .saved{opacity:0}[data-phase="ready"] .caret,[data-phase="listening"] .caret,[data-phase="stop"] .caret,[data-phase="cleanup"] .caret,[data-phase="inserting"] .caret{opacity:1}[data-phase="done"] .editor{transform:perspective(1400px) rotateX(0);box-shadow:0 35px 70px -28px #294c8b55,0 2px 10px #14387308}
@media(min-width:1400px){.composition{padding-bottom:32px}.stage{margin-top:48px}.paper{min-height:250px}.note-body{font-size:19px}}
@media(max-width:760px){.promo{padding:0 6vw;min-height:100svh}.masthead{padding:24px 0}.brand{font-size:17px}.platform{font-size:10px;letter-spacing:0}.composition{padding-top:20px}.eyebrow{font-size:11px;margin-bottom:20px;letter-spacing:3px}h1{font-size:clamp(33px,8.4vw,60px);letter-spacing:-.07em}.stage{margin-top:28px;padding:80px 0 115px}.speech{left:0;right:0;font-size:13px;line-height:1.7;gap:5px;min-height:65px}.quote{font-size:25px}.editor{border-radius:13px}.paper{padding:23px 23px 14px;min-height:245px}.note-title{font-size:20px}.note-body{font-size:16px;min-height:95px;margin-top:16px}.editor-foot{padding:0 23px}.editor-top{height:40px;padding:0 15px}.capsule-anchor{bottom:54px}.key-hint{bottom:4px;right:50%;transform:translateX(50%)}[data-phase="ready"] .key-hint,[data-phase="stop"] .key-hint{transform:translateX(50%)}.key-hint kbd{width:30px;height:28px;border-radius:7px;font-size:12px}.key-label{max-width:none;white-space:nowrap}.bottom{min-height:98px;padding-bottom:42px;gap:12px}.signature{font-size:10px;letter-spacing:0}.play-controls{gap:5px}button{min-width:61px;height:34px;font-size:10px}}
@media(max-height:760px) and (min-width:761px){.masthead{padding:22px 0}.eyebrow{margin-bottom:12px}h1{font-size:66px}.stage{margin-top:16px;padding-top:45px;padding-bottom:85px}.paper{min-height:185px;padding-top:20px}.bottom{min-height:60px}.capsule-anchor{bottom:23px}.key-hint{bottom:23px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

@media(prefers-reduced-motion:reduce){.polish .star{transform:none;opacity:1;filter:none}.label-now{opacity:1;transform:none}.label-leaving{display:none}}

/* English shares the same scene, timing and glyphs. */
:lang(en) h1{font-size:clamp(40px,6.2vw,82px);gap:.16em;letter-spacing:-.065em}
:lang(en) .eyebrow{letter-spacing:2px}
:lang(en) #capsule-label{width:78px}
:lang(en) .capsule{width:145px}
:lang(en) [data-phase="listening"] .capsule{width:164px}
:lang(en) [data-phase="stop"] .capsule,:lang(en) [data-phase="cleanup"] .capsule,:lang(en) [data-phase="inserting"] .capsule{width:155px}
:lang(en) .key-label{max-width:60px}
@media(max-width:760px){:lang(en) h1{font-size:clamp(26px,7.2vw,52px);gap:.15em}:lang(en) .note-title{font-size:19px}:lang(en) .key-label{max-width:none}:lang(en) .speech{font-size:12px}}
:lang(en) h1{gap:.22em;letter-spacing:-.045em}
:lang(en) .comma,:lang(en) .period{letter-spacing:-.04em}
:lang(en) .period{width:auto}

/* Inline transcript follows capsule-states-v2.html: one shell, one bottom anchor. */
.capsule{justify-content:flex-start;gap:9px;padding:0 18px;font-weight:500;background:linear-gradient(135deg,#343b85,#101b35);box-shadow:inset 0 1px 0 #ffffff1c,0 10px 24px -8px #141b3870;transition:width 480ms var(--ease),opacity 220ms ease,transform 320ms var(--ease)}
#capsule-label{transition:width 480ms var(--ease),margin 480ms var(--ease)}
.capsule-live{display:flex;flex:none;min-width:0;width:0;height:20px;max-width:20em;margin-left:-9px;border-left:0 solid transparent;padding-left:0;opacity:0;color:#f7faffd6;font-weight:400;line-height:20px;overflow:hidden;transition:width 480ms var(--ease),margin 480ms var(--ease),padding 480ms var(--ease),border-left-width 480ms var(--ease),opacity 240ms ease,border-color 240ms ease}
.capsule-live.has{margin-left:0;padding-left:11px;border-left-width:1px;border-left-color:#f7faff38;opacity:1}
.live-clip{flex:1;min-width:0;overflow:hidden;display:flex;align-items:center}
#spoken{display:block;flex:none;white-space:nowrap;font-weight:400;transition:transform 160ms linear}
.capsule-live.capped .live-clip{mask-image:linear-gradient(90deg,transparent,#000 18px)}
[data-phase="stop"] .capsule-live.has,[data-phase="cleanup"] .capsule-live.has{opacity:.5}
[data-phase="ready"] .capsule{opacity:1;transform:none}
[data-phase="ready"] .wave{opacity:.4;transform:none}
.stage{padding-top:20px}
@media(max-width:760px){.stage{padding-top:16px}}
@media(prefers-reduced-motion:reduce){.capsule,#capsule-label,.capsule-live,#spoken{transition:none!important}}

/* Clip moving text at the shell as well as each fixed-height text slot. */
.capsule{position:relative;overflow:hidden;isolation:isolate;line-height:1}
#capsule-label{flex-shrink:0;isolation:isolate;contain:paint;clip-path:inset(0)}
#capsule-label>span{height:22px;line-height:22px;overflow:hidden}
.capsule-live{align-items:center;flex-shrink:0;isolation:isolate;contain:paint;clip-path:inset(0)}
.live-clip{height:20px;max-height:20px;line-height:20px;align-items:center}
#spoken{height:20px;line-height:20px}