.operation-demo{color:#151619;text-align:left;width:366px;max-width:100%;margin:auto;font-family:Arial,Helvetica,sans-serif}.op-device{isolation:isolate;background:#fff;border:1px solid #dcdfe3;border-radius:30px;flex-direction:column;height:704px;display:flex;overflow:hidden;box-shadow:0 18px 42px -29px #141b2948}.op-device *{box-sizing:border-box}.op-status{flex-shrink:0;justify-content:space-between;height:38px;padding:13px 22px 8px;font-size:10px;display:flex}.op-status>span{letter-spacing:1px;font-size:9px}.op-app-bar{border-bottom:1px solid #eceef0;flex-shrink:0;justify-content:space-between;align-items:center;height:53px;padding:8px 21px 15px;display:flex}.op-app-bar img{object-fit:contain;width:108px;height:27px}.op-body{flex:1;min-height:0;padding:20px 20px 14px;position:relative;overflow:hidden}.op-body h3{letter-spacing:-1.1px;margin:0 0 7px;font-size:26px;font-weight:600;line-height:1.14}.op-body h4,.op-sheet h4{letter-spacing:-.35px;margin:9px 0;font-size:19px;font-weight:600;line-height:1.32}.op-body p,.op-sheet p{margin:9px 0;font-size:12px;line-height:1.6}.op-sub{color:#727780;margin:0 0 17px!important;font-size:11px!important}.op-muted{color:#737984;margin:12px 0!important;font-size:10px!important;line-height:1.55!important}.op-center{text-align:center}.op-person{align-items:center;gap:10px;margin:14px 0;display:flex}.op-person>span{background:#f2f3f5;border:1px solid #e1e4e8;border-radius:50%;flex-shrink:0;place-items:center;width:36px;height:36px;font-size:12px;display:grid}.op-person strong{font-size:13px;font-weight:600;display:block}.op-person small{color:#7d828a;margin-top:3px;font-size:10px;display:block}.op-card{background:#f4f4f6;border:1px solid #ebedef;border-radius:15px;margin:13px 0;padding:15px}.op-card>small{letter-spacing:.8px;color:#7b8189;font-size:8px;line-height:1.4;display:block}.op-card h4{margin:10px 0}.op-card .op-person{margin:2px 0 13px}.op-card p:last-child{margin-bottom:0}.op-dark{color:#fff;background:#121417;border-color:#121417}.op-dark>small,.op-dark p{color:#c0c4cb}.op-dark h4{font-size:24px;line-height:1.17}.op-dark .op-action{color:#151619;background:#fff;border-color:#fff}.op-source{color:#777d87;align-items:flex-start;gap:5px;display:flex;font-size:9px!important;line-height:1.6!important}.op-source svg{flex-shrink:0;margin-top:1px}.op-action{-webkit-appearance:none;appearance:none;color:#fff;text-align:left;cursor:pointer;touch-action:manipulation;background:#151619;border:1px solid #151619;border-radius:10px;justify-content:space-between;align-items:center;gap:9px;min-height:39px;padding:11px 13px;font:500 11px/1.4 Arial,Helvetica,sans-serif;transition:box-shadow .25s,background .25s,transform .25s;display:flex;position:relative}.op-action:focus-visible{outline-offset:4px;outline:2px solid #727f91}.op-caption button:focus-visible{outline-offset:4px;outline:2px solid #727f91}.op-action:hover{box-shadow:0 0 0 3px #8b94a516}.op-action svg{flex-shrink:0}.op-light{color:#30343b;background:#fff;border-color:#e3e6ea}.op-full{width:100%;margin-top:12px}.op-is-target{box-shadow:0 0 0 3px #8b94a52c}.op-touch{pointer-events:none;z-index:6;background:#fff9;border:1.5px solid #737e8e;border-radius:50%;width:29px;height:29px;animation:1.5s both op-touch;position:absolute;top:50%;left:68%;box-shadow:0 3px 12px #19213326}.op-touch i{background:#111923b0;border-radius:50%;position:absolute;inset:7px}.op-touch:after{content:"";border:1px solid #929dad;border-radius:50%;animation:1.5s both op-ring;position:absolute;inset:-5px}.op-tabs,.op-tones{background:#f0f1f3;border:1px solid #e8eaed;border-radius:10px;align-items:center;gap:3px;margin:15px 0;padding:3px;display:flex}.op-tabs>span,.op-tabs>.op-action{text-align:center;color:#727780;background:0 0;border:0;border-radius:7px;flex:1;justify-content:center;min-height:33px;padding:8px 4px;font-size:10px;display:flex}.op-tabs .selected{color:#151619;background:#fff;box-shadow:0 1px 3px #17212c10}.op-row{border-bottom:1px solid #e8eaee;justify-content:space-between;align-items:center;gap:12px;min-height:40px;padding:11px 0;font-size:11px;display:flex}.op-row b{color:#707680;text-align:right;font-size:10px;font-weight:500}.op-setting{background:0 0;border:0;border-bottom:1px solid #e8eaee;border-radius:0;width:100%;min-height:44px;padding:14px 0;font-size:11px}.op-setting b{color:#707680;font-size:10px;font-weight:500}.op-source-link{color:#646c79;background:0 0;border:0;border-radius:0;width:100%;min-height:0;padding:8px 0 0;font-size:10px}.op-two{grid-template-columns:1fr 1fr;gap:8px;margin:15px 0;display:grid}.op-inert-choice{text-align:center;color:#757b85;background:#fff;border:1px solid #e3e6ea;border-radius:10px;justify-content:center;align-items:center;padding:12px;font-size:11px;display:flex}.op-notice{color:#4a5b4d;background:#edf1ed;border:1px solid #e0e7e0;border-radius:10px;align-items:center;gap:7px;margin-top:14px;padding:11px 12px;font-size:10px;line-height:1.45;animation:.5s both op-result;display:flex}.op-notice svg{flex-shrink:0}.op-field-label{letter-spacing:.75px;color:#7e848d;margin:15px 0 8px;font-size:8px;line-height:1.5;display:block}.op-input{color:#2e343c;text-align:left;background:#f8f9fa;border:1px solid #dfe3e8;border-radius:12px;width:100%;min-height:112px;margin:10px 0 16px;padding:15px;display:block;font-size:13px!important;line-height:1.7!important}.op-editing{border-color:#9ea9b7;box-shadow:0 0 0 3px #949eae10}.op-goal{align-items:flex-start;font-weight:400}.op-caret{vertical-align:-2px;background:#1c2634;width:1.5px;height:13px;margin-left:3px;animation:1s steps(2,end) infinite op-caret;display:inline-block}.op-sheet-layer{z-index:10;align-items:flex-end;display:flex;position:absolute;inset:0;overflow:hidden}.op-scrim{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#19213125;animation:.3s both op-fade;position:absolute;inset:0}.op-sheet{background:#fff;border-top:1px solid #e2e5e9;border-radius:22px 22px 0 0;width:100%;padding:12px 21px 22px;animation:.5s cubic-bezier(.2,.7,.2,1) both op-sheet-in;position:relative;box-shadow:0 -10px 40px #1a23341a}.op-sheet-handle{background:#d5d9df;border-radius:4px;width:34px;height:4px;margin:0 auto 18px}.op-sheet header{justify-content:space-between;align-items:center;gap:10px;display:flex}.op-sheet header h4{margin:0}.op-sheet .op-card{margin:16px 0}.op-close{color:#6b737f;cursor:pointer;background:#f1f2f4;border:0;border-radius:50%;place-items:center;width:30px;min-height:30px;padding:5px;display:grid}.op-sheet .op-full{margin-top:17px}.op-option{border:1px solid #e0e4e9;border-radius:12px;justify-content:space-between;align-items:center;gap:10px;width:100%;margin:12px 0;padding:14px;display:flex}.op-option>span{flex:1}.op-option strong{font-size:12px;display:block}.op-option small{color:#737b87;margin-top:4px;font-size:10px;display:block}.op-option.is-selected{background:#f4f6f8;border-color:#758295;box-shadow:0 0 0 2px #75829510}.op-draft{background:#f7f8fa;border:1px solid #dfe4e9;border-radius:13px;margin:18px 0;padding:3px 15px 15px}.op-draft p{font-size:13px;line-height:1.8}.op-draft .op-field-label{font-size:8px}.op-map{width:100%;height:190px;margin:10px 0 15px;position:relative}.op-map svg{width:100%;height:100%;position:absolute}.op-map path{stroke:#d8dde5;stroke-width:1.3px;fill:none}.op-map .op-route{stroke:#6b7787;stroke-width:2px;stroke-dasharray:210;stroke-dashoffset:210px;transition:stroke-dashoffset 1s}.op-route-selected .op-route{stroke-dashoffset:0}.op-node{flex-direction:column;align-items:center;gap:3px;display:flex;position:absolute;transform:translate(-50%,-50%)}.op-node>span,.op-node>.op-action{background:#fafbfc;border:1px solid #d8dee6;border-radius:50%;place-items:center;width:36px;height:36px;min-height:36px;padding:0;font-size:10px;transition:background .45s,color .45s;display:grid}.op-node-selected>span,.op-node-selected>.op-action{color:#fff;background:#202731;border-color:#202731}.op-node small{background:#fff;padding:1px 4px;font-size:9px}.op-node .op-touch{left:50%}.op-privacy-title{color:#fff;background:#14171b;border-radius:12px;align-items:center;gap:12px;margin:12px 0;padding:15px;display:flex}.op-privacy-title strong{letter-spacing:-.3px;font-size:16px}.op-toggle{background:#e0e4e9;border-radius:15px;width:32px;height:19px;transition:background .3s;display:block;position:relative}.op-toggle i{background:#fff;border-radius:50%;width:13px;height:13px;transition:transform .3s;display:block;position:absolute;top:3px;left:3px;box-shadow:0 1px 3px #0002}.op-toggle.on{background:#27313d}.op-toggle.on i{transform:translate(13px)}.op-nav{border-top:1px solid #edf0f3;flex-shrink:0;justify-content:space-around;align-items:center;gap:4px;height:57px;padding:5px 9px 0;display:flex}.op-nav>span{color:#969da7;border-radius:10px;flex-direction:column;align-items:center;gap:4px;padding:6px 13px;display:flex}.op-nav .selected{color:#303a48;background:#f1f3f5}.op-nav small{font-size:8px}.op-home-indicator{background:#151619;border-radius:4px;flex-shrink:0;width:98px;height:4px;margin:10px auto 8px}.op-keyboard-body{flex-direction:column;flex:1;min-height:0;display:flex;position:relative;overflow:hidden}.op-chat-head{border-bottom:1px solid #eef0f3;align-items:center;gap:10px;padding:6px 16px 12px;display:flex}.op-chat-head>.op-person{flex:1;margin:0}.op-chat-head .op-person>span{width:30px;height:30px;font-size:9px}.op-chat-head .op-person strong{font-size:11px}.op-chat-head .op-person small{font-size:8px}.op-chat{padding:18px 14px 2px}.op-bubble{background:#eceef2;border-radius:13px;max-width:94%;padding:12px 14px;font-size:12px;line-height:1.6}.op-composer{color:#a1a7b0;background:#fafbfc;border:1px solid #e4e7ec;border-radius:16px;align-items:center;gap:9px;min-height:62px;margin-top:18px;padding:10px;font-size:10px;line-height:1.5;display:flex}.op-composer>span:nth-child(2){flex:1}.op-composer svg{flex-shrink:0}.op-composer.has-draft{color:#2c3543;animation:.5s both op-result}.op-send{color:#8a939f;background:#eef1f4;border-radius:50%;flex-shrink:0;place-items:center;width:19px;height:19px;display:grid}.op-unsent{color:#718075;align-items:center;gap:5px;margin:6px 2px 0;font-size:8px;display:flex}.op-key-panel{background:linear-gradient(150deg,#fff,#f8f9fb);border:1px solid #e0e4ea;border-radius:16px;margin:8px 8px 5px;padding:12px}.op-key-heading{border-bottom:1px solid #edf0f4;align-items:center;gap:6px;padding-bottom:11px;font-size:8px;display:flex}.op-key-heading img{width:16px;height:16px}.op-key-heading small{color:#9299a3;margin-left:auto;font-size:7px}.op-tones{background:0 0;border:0;justify-content:space-around;margin:6px 0 11px;padding:0}.op-tones>span,.op-tones>.op-action{color:#8a929f;background:0 0;border:0;border-radius:0;min-height:31px;padding:8px 6px;font-size:10px;position:relative}.op-tones .selected{color:#222b38;font-weight:600}.op-tones .selected:after{content:"";background:#26313f;width:22px;height:2px;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.op-reply{min-height:62px;margin:12px 2px 9px;font-size:13px;line-height:1.65;animation:.4s both op-result}.op-reason{color:#768191;background:0 0;border:0;width:100%;min-height:26px;padding:4px 1px;font-size:9px}.op-key-actions{border-top:1px solid #e8edf2;justify-content:space-between;align-items:center;gap:10px;margin-top:9px;padding-top:11px;display:flex}.op-key-actions>span{color:#7b8594;background:#edf0f4;border-radius:20px;gap:8px;padding:7px 12px;font-size:10px;display:flex}.op-key-actions .op-action{border-radius:20px;min-height:30px;padding:7px 14px;font-size:10px}.op-keys{background:#f1f3f6;flex-shrink:0;margin-top:auto;padding:4px 7px 8px}.op-keys>div{justify-content:center;gap:4px;margin-top:5px;display:flex}.op-keys span{color:#414b59;background:#fff;border-radius:4px;place-items:center;width:28px;height:27px;font-size:12px;display:grid;box-shadow:0 1px 1px #6d76822b}.op-keys .op-space{width:165px;font-size:9px}.op-keys .op-return{width:60px;font-size:9px}.op-caption{padding:23px 4px 0}.op-progress{gap:4px;margin-bottom:15px;display:flex}.op-progress>button{cursor:pointer;background:0 0;border:0;flex:1;height:18px;padding:0;position:relative}.op-progress>button:before{content:"";background:#dfe3e8;border-radius:3px;height:2px;transition:background .4s;position:absolute;top:8px;left:0;right:0}.op-progress>button.is-reached:before{background:#505c6c}.op-progress>button[aria-current=step]:before{background:#151e2a;height:3px;top:7px}.op-caption-heading{align-items:baseline;gap:12px;display:flex}.op-caption-heading>span{color:#9197a0;letter-spacing:.7px;flex-shrink:0;font-size:9px}.op-caption-heading>strong{letter-spacing:-.2px;font-size:14px;font-weight:500;line-height:1.45}.op-caption>p{color:#828994;min-height:38px;margin:8px 0 12px;font-size:11px;line-height:1.7}.op-inspection{align-items:center;gap:6px;display:flex}.op-inspection>span{color:#979da6;margin-right:auto;font-size:9px}.op-inspection button{color:#747f8e;cursor:pointer;background:0 0;border:1px solid #e0e4e9;border-radius:50%;place-items:center;width:30px;height:30px;display:grid}@keyframes op-touch{0%{opacity:0;transform:translate(25%,-5%)scale(1.2)}35%{opacity:1;transform:translate(-50%,-50%)scale(1)}63%{opacity:1;transform:translate(-50%,-50%)scale(.78)}82%{opacity:1;transform:translate(-50%,-50%)scale(1.03)}to{opacity:0;transform:translate(-50%,-50%)scale(1)}}@keyframes op-ring{0%,40%{opacity:0;transform:scale(.7)}64%{opacity:.7;transform:scale(1)}to{opacity:0;transform:scale(1.8)}}@keyframes op-sheet-in{0%{opacity:.1;transform:translateY(85%)}to{opacity:1;transform:translateY(0)}}@keyframes op-fade{0%{opacity:0}to{opacity:1}}@keyframes op-result{0%{opacity:.2;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@keyframes op-caret{50%{opacity:0}}.operation-demo[data-running=false] *{transition:none!important;animation:none!important}.operation-demo[data-running=false] .op-touch{display:none}html[data-motion=paused] .operation-demo *{transition:none!important;animation:none!important}html[data-motion=paused] .operation-demo .op-touch{display:none}.operation-demo[data-mode=reduced] *{transition:none!important;animation:none!important}.operation-demo[data-mode=reduced] .op-touch{display:none}@media (max-width:760px){.operation-demo{width:348px}.op-device{border-radius:26px;height:704px}.op-body{padding:19px 17px 12px}.op-body h3{font-size:25px}.op-caption{padding:18px 1px 0}.op-nav>span{padding:6px 11px}.op-sheet{padding:12px 18px 21px}}@media (max-width:360px){.op-device{height:732px}.op-status{padding-left:17px;padding-right:17px}.op-card{padding:13px}.op-key-panel{padding:10px}.op-bubble{font-size:11px}.op-keys span{width:23px}.op-body h3{font-size:23px}.op-nav>span{padding:6px 8px}}@media (prefers-reduced-motion:reduce){.operation-demo *{transition:none!important;animation:none!important}.operation-demo .op-touch{display:none}}