#automation-preview { background:#f5f6f2; text-align:left; }
#cap-steps li { position:relative; transition:color .45s,background-color .45s; border-radius:8px; }
#cap-steps li.current { background:linear-gradient(90deg,#fff2e7,transparent); }
#cap-steps li b { display:grid; place-items:center; flex:0 0 20px; height:20px; }
#cap-steps li.current b { border:2px solid #f8d9c2; border-top-color:#ec6d32; border-radius:50%; animation:capSpin 1s linear infinite; }
#cap-steps li.done b { color:#fff; background:#719b61; border-radius:50%; animation:capCheck .45s cubic-bezier(.2,1.6,.5,1) both; }
#cap-steps li.current small { animation:capBlink 1.4s ease-in-out infinite; }
.cap-thinking { display:inline-block; margin-left:5px; letter-spacing:3px; animation:capBlink 1.2s infinite; }
#cap-results p { animation:capResultIn .55s cubic-bezier(.22,1,.36,1) both; }
@keyframes capSpin { to { transform:rotate(360deg); } }
@keyframes capCheck { from { transform:scale(.45); opacity:0; } to { transform:scale(1); opacity:1; } }
@keyframes capResultIn { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:translateY(0); } }
.clinic-picker { display:flex; flex-wrap:wrap; justify-content:center; gap:5px; margin-bottom:16px; }
.clinic-picker button { padding:7px 9px; border:1px solid #cfd9c7; border-radius:16px; background:transparent; font:inherit; font-size:11px; cursor:pointer; }
.clinic-picker button[aria-pressed=true] { background:#26352c; color:white; }
.clinic-device { width:min(100%,310px); border-width:7px; border-radius:35px; position:relative; }
.clinic-picker button { transition:background .4s,color .4s,box-shadow .4s; }
.clinic-picker button[aria-pressed=true] { box-shadow:0 4px 12px #26352c20; }
.clinic-slide-in { animation:clinicSlideIn .65s cubic-bezier(.22,1,.36,1) both; }
.clinic-step-in { animation:clinicStepIn .5s ease-out both; }
.clinic-outgoing { position:absolute; left:0; right:0; pointer-events:none; animation:clinicSlideOut .45s ease-in both; }
.clinic-content.clinic-slide-in .clinic-author { animation:clinicStepIn .5s .08s both; }
.clinic-content.clinic-slide-in .clinic-compose,
.clinic-content.clinic-slide-in .clinic-form { animation:clinicStepIn .55s .14s both; }
.clinic-form label { transition:color .3s; }
@keyframes clinicSlideIn { from { opacity:0; transform:translateX(22px); } to { opacity:1; transform:translateX(0); } }
@keyframes clinicSlideOut { to { opacity:0; transform:translateX(-18px); } }
@keyframes clinicStepIn { from { opacity:.35; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
.clinic-top { display:flex; justify-content:space-between; align-items:center; padding:10px 15px; border-bottom:1px solid #eee; font-size:15px; }
.clinic-top b { font-size:13px; }.clinic-brand { padding:14px 16px; font-size:12px; font-weight:800; letter-spacing:1px; color:#a682c0; }.clinic-brand small { display:block; font-size:9px; color:#999; letter-spacing:0; font-weight:400; }
.clinic-content { padding:0 16px; min-height:290px; }.clinic-category { display:inline-block; padding:4px 8px; background:#f4eef9; border-radius:5px; font-size:10px; color:#9673b0; }.clinic-content h4 { font-size:15px; line-height:1.5; margin:10px 0; }
.clinic-author { display:flex; align-items:center; gap:7px; margin-bottom:12px; font-size:10px; }.clinic-author i { padding:6px 9px; background:#f6ecdf; border-radius:50%; font-style:normal; }.clinic-author small { display:block; font-size:8px; color:#999; }
.clinic-compose { border:1px solid #e6e0ec; border-radius:8px; padding:12px; min-height:125px; background:#fcfaff; }.clinic-compose small { color:#9b8ea6; font-size:9px; }.clinic-compose p { font-size:12px; line-height:1.9; margin-top:5px; animation:capEnter .4s both; }
.clinic-tags { color:#9883a8; font-size:9px; padding:12px 0; }.clinic-form label { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid #eee; font-size:11px; }.clinic-form label span { color:#947ba8; }.clinic-form p { font-size:9px; padding-top:10px; color:#92958e; }
.clinic-submit { margin:8px 16px 12px; background:#eee9f2; color:#998ca4; text-align:center; padding:11px 5px; border-radius:8px; font-size:11px; }.clinic-submit.ready { background:#9b78bc; color:#fff; }.clinic-bottom { border-top:1px solid #eee; padding:13px 0; text-align:center; font-size:11px; color:#92908f; }
.cap-heading { margin-bottom:40px; }
.cap-heading h2 { font-size:clamp(36px,5vw,68px); line-height:1.2; letter-spacing:-.055em; }
.cap-heading h2 em { color:#ec6d32; font-style:normal; }
.cap-heading > p:last-child { margin-top:22px; color:#71796f; font-size:18px; }
.cap-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.cap-place-map { height:130px; position:relative; overflow:hidden; background:repeating-linear-gradient(0deg,transparent 0 35px,#fff 35px 42px),repeating-linear-gradient(90deg,#e3ebdf 0 65px,#fff 65px 73px); }
.cap-place-road { position:absolute; left:55%; top:-30px; width:20px; height:210px; background:#fff; transform:rotate(35deg); }
.cap-place-map > b { position:absolute; left:42%; top:35px; color:#ec6d32; font-size:24px; text-align:center; }
.cap-place-map b small { display:block; font-size:10px; padding:2px 7px; background:white; border-radius:4px; color:#394d36; }
.cap-map-label { position:absolute; right:10px; bottom:7px; font-size:9px; color:#82937b; }
.cap-place-info { padding:16px 20px; }.cap-place-info h3 { font-size:20px; }.cap-place-info h3 small { font-size:10px; font-weight:400; color:#9aa393; margin-left:8px; }.cap-place-info > p { font-size:10px; color:#83927a; margin-top:4px; }
.cap-place-actions { display:flex; justify-content:space-around; padding:12px 0; color:#588449; font-size:11px; border-bottom:1px solid #eee; }.cap-place-hours { font-size:11px; padding:10px 0; }.cap-place-review b { font-size:12px; }.cap-place-review p { font-size:11px; padding:9px 0; border-bottom:1px solid #eee; }.cap-place-review small { display:block; font-size:9px; color:#939e8c; }
@media(max-width:900px) { .cap-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.cap-tabs button { padding:22px; display:flex; align-items:center; gap:12px; background:white; border:1px solid #dde2d8; border-radius:12px; color:#26312a; font:inherit; font-weight:700; cursor:pointer; transition:background .3s,color .3s,transform .3s; }
.cap-tabs button:hover { transform:translateY(-3px); }
.cap-tabs button[aria-pressed=true] { background:#21362b; color:#fff; }
.cap-tabs small { color:#9eab9e; font-size:11px; }
.cap-tabs button > span { margin-left:auto; color:#ed8b56; }
.cap-detail { display:flex; justify-content:space-between; align-items:center; gap:20px; margin:30px 0 22px; }
.cap-detail h3 { font-size:21px; letter-spacing:-.04em; }
#cap-tasks { display:flex; flex-wrap:wrap; gap:14px; margin-top:8px; color:#748071; font-size:13px; }
.cap-pause { background:transparent; border:1px solid #ccd4c7; border-radius:20px; padding:8px 14px; white-space:nowrap; font:inherit; font-size:12px; cursor:pointer; }
.cap-demo { display:grid; grid-template-columns:1.25fr 60px 1fr; align-items:center; background:#e9ede4; border:1px solid #dde4d5; border-radius:22px; padding:28px; }
.cap-example-label { display:flex; justify-content:space-between; gap:8px; font-size:10px; letter-spacing:1px; color:#6d7c68; margin-bottom:18px; }
.cap-example-label span { letter-spacing:0; }
#cap-screen { min-height:430px; display:grid; align-items:center; }
.cap-phone { width:255px; margin:auto; border:6px solid #26352c; border-radius:30px; background:#fff; overflow:hidden; box-shadow:0 20px 35px #26352c15; animation:capEnter .5s both; }
.cap-phone-top { display:flex; justify-content:space-between; padding:8px 15px; font-size:10px; }
.cap-app-name { padding:6px 15px; font-size:22px; font-weight:800; }.cap-app-name > span { color:#ec6d32; }.cap-app-name small { float:right; font-size:9px; color:#999; margin-top:9px; font-weight:400; }
.cap-app-nav { font-size:11px; padding:8px 15px; border-bottom:1px solid #eee; }
.cap-app-banner { padding:22px 16px; background:#e6e9fb; }.cap-app-banner small { font-size:10px; color:#7a7e9b; }.cap-app-banner strong { display:block; font-size:18px; line-height:1.4; margin:10px 0; }.cap-app-banner > span { font-size:10px; }
.cap-app-row { display:flex; gap:8px; align-items:center; padding:15px 10px; border-bottom:1px solid #eee; }.cap-app-row i { background:#fff1e8; padding:8px; border-radius:9px; font-style:normal; color:#ec6d32; }.cap-app-row b { font-size:11px; }.cap-app-row small { display:block; font-size:9px; color:#999; }.cap-app-row em { font-size:9px; margin-left:auto; color:#dd7744; }.cap-app-bottom { text-align:center; padding:12px; color:#777; font-size:16px; }
.cap-web { background:white; border:1px solid #d4dcd0; border-radius:12px; overflow:hidden; min-height:400px; animation:capEnter .5s both; box-shadow:0 14px 25px #26352c09; }.cap-address { background:#f6f7f5; padding:12px; font-size:9px; color:#a4b19e; }.cap-address span { margin-left:20px; color:#899481; }
.cap-cafe-banner { padding:24px; background:#dae8d0; }.cap-cafe-banner small { display:block; font-size:11px; color:#71816a; }.cap-cafe-banner strong { font-size:22px; }
.cap-web-body { display:grid; grid-template-columns:100px 1fr; }.cap-web-body aside { display:flex; flex-direction:column; gap:14px; padding:20px 12px; background:#fafbf8; font-size:10px; }.cap-posts { padding:16px; }.cap-search { padding:8px; border:1px solid #dae4d4; font-size:10px; margin-bottom:12px; }.cap-posts > b { font-size:12px; }.cap-posts p { font-size:11px; padding:12px 0; border-bottom:1px solid #eee; }.cap-posts small { display:block; font-size:9px; color:#999; }.cap-comment { margin-top:10px; font-size:10px; color:#6f8c68; }
.cap-editor-head { display:flex; justify-content:space-between; padding:16px; font-size:12px; }.cap-editor-head span { color:#579455; font-size:10px; }.cap-toolbar { background:#f6f8f4; padding:10px 16px; font-size:11px; }.cap-editor { padding:20px; }.cap-editor > small { font-size:10px; color:#8b9686; }.cap-editor h3 { font-size:18px; margin:8px 0 16px; }.cap-editor-image { background:#eef0e9; text-align:center; padding:18px; color:#98a38e; }.cap-editor-image span { display:block; font-size:10px; }.cap-editor p { font-size:11px; margin-top:14px; line-height:1.7; }.cap-caret { display:inline-block; height:13px; width:2px; background:#4a8150; animation:capBlink 1s infinite; }
.cap-connector { text-align:center; color:#739168; position:relative; }.cap-connector span { font-size:30px; }.cap-connector i { position:absolute; left:0; top:50%; height:4px; width:8px; border-radius:10px; background:#ec6d32; animation:capTravel 1.8s infinite; }
.cap-console { padding:24px; background:#fff; border-radius:14px; border:1px solid #dce4d5; }.cap-console-head { display:flex; justify-content:space-between; align-items:center; font-size:9px; letter-spacing:1px; color:#82927c; }.cap-console-head i { width:6px; height:6px; background:#82b36b; border-radius:50%; animation:capBlink 1.8s infinite; }.cap-console > h3 { font-size:20px; letter-spacing:-.04em; margin:20px 0; }
#cap-steps { list-style:none; }#cap-steps li { display:flex; align-items:center; gap:10px; padding:14px 0; border-bottom:1px solid #edf0e9; font-size:12px; color:#9aa294; }#cap-steps b { font-size:10px; }#cap-steps small { margin-left:auto; font-size:10px; }#cap-steps .current { color:#ec6d32; }#cap-steps .done { color:#52784a; }
.cap-results { margin-top:20px; }.cap-results > small { font-size:10px; color:#8a9783; }#cap-results { min-height:95px; padding-top:8px; }#cap-results p { font-size:11px; color:#5c7c50; line-height:2.4; animation:capEnter .4s both; }#cap-results .cap-waiting { color:#a0a897; }.cap-progress { height:3px; background:#edf0e8; margin-top:14px; }.cap-progress i { height:100%; display:block; background:#ec6d32; transition:width .7s ease; }
.cap-foot { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:25px; font-size:14px; }.cap-foot p { color:#7b8476; }.cap-foot a { white-space:nowrap; font-weight:700; }
@keyframes capEnter { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }@keyframes capBlink { 50% { opacity:.3; } }@keyframes capTravel { 0% { transform:translateX(0); opacity:0; } 25% { opacity:1; } 100% { transform:translateX(50px); opacity:0; } }
.cap-paused *, .cap-paused *::before { animation-play-state:paused!important; }
#capabilities button:focus-visible { outline:2px solid #ec6d32; outline-offset:4px; }
@media(max-width:760px) { .cap-tabs { gap:6px; }.cap-tabs button { padding:14px 9px; font-size:12px; gap:5px; }.cap-tabs button > span { display:none; }.cap-demo { grid-template-columns:1fr; padding:18px; }.cap-connector { padding:8px; transform:rotate(90deg); }.cap-connector i { display:none; }.cap-detail h3 { font-size:17px; }#cap-tasks { font-size:11px; gap:8px; }.cap-foot { flex-direction:column; align-items:flex-start; }.cap-web-body { grid-template-columns:76px 1fr; }.cap-console { margin-top:10px; } }
@media(prefers-reduced-motion:reduce) { #capabilities *, #capabilities *::before { animation:none!important; transition:none!important; } }