.speed-preview{display:flex;flex-direction:column;align-items:stretch;justify-content:center}
.speed-preview:before{display:none}
.speed-demo-window{position:relative;width:100%;max-width:440px;margin:auto;background:#192940;border:1px solid #435068;border-radius:11px;overflow:hidden;height:284px;flex-shrink:0;box-shadow:0 12px 28px #0002;color:#e6eaf2;font-family:var(--font)}
.speed-window-bar{display:flex;align-items:center;gap:9px;border-bottom:1px solid #36455c;padding:11px 14px;height:40px;font-size:9px;color:#8f9eb5;background:#1c2d46}
.speed-window-bar>span:first-child{display:flex;align-items:center;gap:6px;color:#dce4f1;font-weight:500;font-size:10px}
.speed-window-bar>span:first-child svg{width:16px;height:16px}
.speed-window-bar>span:nth-child(2){margin-left:auto;font-size:8px}
.speed-window-close{font-size:15px;color:#8797ae;margin-left:4px}
.speed-mini-form{padding:15px 17px 16px;display:flex;flex-direction:column;gap:11px;transition:transform .7s ease,opacity .7s ease;transform-origin:50% 80%}
.speed-field-row{display:grid;grid-template-columns:.75fr 1.25fr;gap:10px}
.speed-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.speed-field>span{font-size:8px;color:#97a5bb;line-height:1}
.speed-field>div{border:1px solid #425169;border-radius:5px;background:#26364e;color:#e0e6f0;min-height:27px;font-size:9px;line-height:1.4;padding:6px 9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.speed-field>div>span:last-child:not(:first-child){float:right;color:#b1bdcf}
.speed-field>.speed-context{height:35px;display:flex;align-items:center;gap:1px;border-color:#8d9fbc;background:#25364e;box-shadow:0 0 0 2px #b8caeb0d}
.speed-context i{width:1px;height:11px;background:#c4d3e9;animation:blink 1s step-end infinite;flex-shrink:0}
.speed-submit-visual{position:relative;display:flex;align-items:center;justify-content:center;background:#f4efe6;color:#182840;border:1px solid #f4efe6;border-radius:99px;height:32px;font-size:9px;font-weight:500;margin-top:2px;transition:transform .18s ease,background .3s ease,box-shadow .3s ease}
.speed-submit-visual>svg{height:10px;width:10px;position:absolute;right:15px}
.speed-submit-done{position:absolute;opacity:0;transition:opacity .25s}
.speed-submit-label{transition:opacity .25s}
.speed-demo-cursor{position:absolute;left:72%;top:66%;width:17px;height:21px;z-index:3;transform:rotate(-12deg);opacity:1;transition:left .7s cubic-bezier(.2,.7,.2,1),top .7s cubic-bezier(.2,.7,.2,1),opacity .2s ease,transform .3s ease;pointer-events:none}
.speed-preview[data-speed-phase=click] .speed-demo-cursor{left:60%;top:83%;transform:rotate(-5deg) scale(.92)}
.speed-preview[data-speed-phase=click] .speed-submit-visual{transform:scale(.97);background:#d9e3f4;box-shadow:0 0 0 5px #b6cbed16;transition-delay:.5s}
.speed-click-ring{position:absolute;left:60%;top:83%;width:24px;height:24px;margin:-3px 0 0 -6px;border:1px solid #c0d2f5;border-radius:50%;opacity:0;pointer-events:none;z-index:4}
.speed-preview[data-speed-phase=click] .speed-click-ring{animation:speed-click .6s ease-out .5s both}
.speed-preview:is([data-speed-phase=sent],[data-speed-phase=reply]) .speed-demo-cursor{opacity:0;left:60%;top:83%}
.speed-preview:is([data-speed-phase=sent],[data-speed-phase=reply]) .speed-submit-label{opacity:0}
.speed-preview:is([data-speed-phase=sent],[data-speed-phase=reply]) .speed-submit-done{opacity:1}
.speed-preview:not([data-speed-phase=ready]) .speed-context i{visibility:hidden}
.speed-form-shade{position:absolute;inset:40px 0 0;background:#111e32;opacity:0;pointer-events:none;transition:opacity .65s ease;z-index:4}
.speed-preview[data-speed-phase=reply] .speed-form-shade{opacity:.7}
.speed-preview[data-speed-phase=reply] .speed-mini-form{transform:scale(.97);opacity:.7}
.speed-message-notification{position:absolute;left:12px;right:12px;top:56px;z-index:5;background:#f5f6f9;color:#283348;border:1px solid #fff;border-radius:14px;padding:13px 15px;box-shadow:0 14px 35px #07101f4d;opacity:0;transform:translateY(-60px) scale(.96);transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .3s ease;pointer-events:none}
.speed-preview[data-speed-phase=reply] .speed-message-notification{opacity:1;transform:translateY(0) scale(1)}
.speed-notification-meta{display:flex;align-items:center;gap:6px;color:#9199a5;font-size:7px;letter-spacing:.03em;margin-bottom:10px}
.speed-message-icon{display:grid;place-items:center;width:21px;height:21px;background:#4eaf77;border-radius:6px;box-shadow:0 1px 2px #0001}
.speed-message-icon svg{width:17px;height:17px}
.speed-notification-meta>span:last-child{margin-left:auto;color:#a4acb8;font-size:8px;letter-spacing:0}
.speed-notification-content strong{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:600;color:#273349;margin-bottom:6px}
.speed-notification-content strong>span{font-size:7px;font-weight:400;background:#e6ebf3;border:1px solid #dce3ee;color:#8693a9;border-radius:4px;padding:2px 4px}
.speed-notification-content>p{font-size:11px;line-height:1.65;margin:0;color:#626e82;min-height:55px}
.speed-delivery-receipt{position:absolute;z-index:5;left:19px;right:19px;bottom:29px;display:flex;align-items:center;justify-content:center;gap:9px;opacity:0;transform:translateY(7px);transition:opacity .7s ease .35s,transform .7s ease .35s}
.speed-delivery-receipt>span{width:22px;height:22px;border:1px solid #7bbaa644;border-radius:50%;display:grid;place-items:center;color:#a8d8c5;background:#1a3a37;font-size:11px;flex-shrink:0}
.speed-delivery-receipt>div{display:flex;flex-direction:column;gap:5px}
.speed-delivery-receipt strong{font-size:9px;font-weight:400;color:#d1e3dc}
.speed-delivery-receipt>div>span{font-size:7px;color:#829e98}
.speed-preview[data-speed-phase=reply] .speed-delivery-receipt{opacity:1;transform:none}
.speed-preview-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:8px;color:var(--faint);width:100%;max-width:440px;margin:9px auto 0;min-height:25px}
.speed-preview-footer>div{display:flex;gap:5px}
.speed-preview-footer button{height:25px;width:25px;border:1px solid var(--line);border-radius:5px;background:transparent;color:var(--muted);font-size:12px;padding:0}
.speed-preview-footer button:hover{background:var(--glass-strong)}
.speed-preview-footer button:disabled{opacity:.4;cursor:default}
.speed-preview[data-paused=true] *{animation-play-state:paused!important}
@keyframes speed-click{0%{opacity:.7;transform:scale(.6)}100%{opacity:0;transform:scale(1.7)}}
@media(max-width:1050px) and (min-width:761px){.speed-mini-form{padding:14px 12px;gap:11px}.speed-window-bar{padding:11px 12px}.speed-field-row{grid-template-columns:.7fr 1.3fr;gap:6px}.speed-field>div{font-size:8px;padding:6px}.speed-message-notification{left:9px;right:9px;padding:12px}.speed-notification-content>p{font-size:10px;min-height:65px}.speed-delivery-receipt{left:12px;right:12px;bottom:24px}.speed-delivery-receipt strong{font-size:8px}.speed-delivery-receipt>div>span{font-size:6px}}
@media(max-width:760px){.speed-preview{margin-left:0;margin-right:0}.speed-preview-footer{font-size:7px}.speed-message-notification{padding:13px}.speed-delivery-receipt strong{font-size:8px}.speed-delivery-receipt>div>span{font-size:6px}}
@media(prefers-reduced-motion:reduce){.speed-preview *{animation:none!important;transition:none!important}}