/* Responsive, recreated ActionClip UI. No video, canvas or screenshot scaling. */
.ui-illustration{--ui-purple:#8f5cff;--ui-ink:#252428;--ui-muted:#a5a2ab;--ui-panel:#262626;--widget-font:16px;--widget-icon:20px;--widget-chip-y:8px;--widget-chip-x:9px;--widget-gap:6px;--widget-padding:10px;container-type:inline-size;position:relative;background:#fff;color:var(--ui-ink);border-color:#e7e5ea;isolation:isolate}
.illustration-stage{position:relative;min-height:380px;aspect-ratio:1.18;display:flex;align-items:center;justify-content:center;padding:28px 24px 50px;overflow:hidden}
.ui-illustration .ui-icon{display:inline-block;width:18px;height:18px;flex:none;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.motion-toggle{position:absolute;bottom:12px;right:15px;width:30px;height:30px;display:grid;place-items:center;padding:0;border:1px solid #e5e1e9;border-radius:50%;background:#fff;color:#73667f;cursor:pointer}
.motion-toggle:hover{background:#f5f1f9}.motion-toggle:focus-visible{outline:2px solid #9656e9;outline-offset:3px}.motion-toggle[hidden]{display:none}
.motion-toggle .play-symbol{display:none}.motion-toggle[data-paused="true"] .pause-symbol{display:none}.motion-toggle[data-paused="true"] .play-symbol{display:block}
.ui-surface{position:relative;width:100%;background:var(--ui-panel);border:1px solid #454149;border-radius:14px;box-shadow:0 18px 38px -16px #281e3d4a;color:#f2eff5;font-family:-apple-system,BlinkMacSystemFont,Inter,sans-serif}
.ui-illustration .ui-heading{display:flex;align-items:center;gap:9px;font-size:clamp(14px,3.3cqw,18px);line-height:1.35;font-weight:600;margin:0;color:#f4f1f7;letter-spacing:-.025em}
.ui-heading>.ui-icon{color:#b27aff}.ui-close{margin-left:auto;font-size:20px;line-height:1;color:#aaa5b1;font-weight:400}
.ui-illustration .ui-help{font-size:13px;line-height:1.6;color:#a9a4b1;margin:13px 0 15px}
.ui-badge{font-size:10px;line-height:1.4;color:#c6a1ff;background:#995bfa20;padding:4px 7px;border-radius:5px;white-space:nowrap}
.ui-label{font-size:11px;color:#b4adbf;line-height:1.5}
.ui-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:#9856ec;border:1px solid #ad78f1;border-radius:7px;color:#fff;font-size:13px;font-weight:600;min-height:34px;padding:7px 11px;white-space:nowrap;transition:transform .2s,background .2s}
.ui-button-quiet{background:#ffffff0b;border-color:#4c4656;color:#ded8e6}
.ui-illustration .ui-check{color:#8dd5b1;stroke-width:2.2}
/* Cursor SVG tip is at (3,2); align that point to the actual control center. */
.ui-click-target{position:relative}
.ui-cursor{position:absolute;left:calc(50% - 3px);top:calc(50% - 2px);width:24px;height:28px;color:#fff;filter:drop-shadow(0 2px 2px #0008);opacity:0;transform:translate(10px,8px);transition:opacity .12s,transform .22s cubic-bezier(.2,.7,.3,1);pointer-events:none;z-index:5}
.ui-cursor svg{display:block;width:100%;height:100%;fill:#fff;stroke:#30283b;stroke-width:1.5}
.ai-scene{width:100%;position:relative;display:grid;align-items:center}
.ai-builder,.ai-review{grid-area:1/1;padding:22px;transition:opacity .35s,transform .4s;min-width:0}
.ai-prompt{min-height:90px;border:1px solid #a873f1;border-radius:8px;padding:15px;background:#37333e;color:#f2eefa;font-size:clamp(13px,3.2cqw,16px);line-height:1.6}
.typing-caret{display:inline-block;height:1.1em;width:1.5px;background:#c299ff;vertical-align:-.15em;margin-left:2px;animation:ui-caret 1s steps(1) infinite}
.ai-model{display:flex;justify-content:space-between;align-items:center;background:#ffffff08;border-radius:7px;padding:10px;margin:12px 0 18px;gap:9px;font-size:11px;color:#bbb4c5}.ai-model span:last-child{color:#e0d9e8}
.ai-footer{display:flex;gap:8px;justify-content:flex-end}.ai-generating{display:none}.ai-review{opacity:0;transform:translateY(10px);pointer-events:none}
.ai-success{display:flex;align-items:center;gap:8px;color:#a1deb8;font-size:12px;font-weight:500;margin-bottom:18px}
.ai-review-title{display:flex;gap:10px;align-items:center;margin-bottom:18px}.ai-action-icon{display:grid;place-items:center;width:39px;height:39px;border-radius:9px;background:#995bfa25;color:#c098ff}
.ai-review-title strong{display:block;font-size:16px;line-height:1.5}.ai-review-title small{display:block;font-size:11px;color:#aaa2b6}
.ai-review-prompt{font-size:13px;line-height:1.65;color:#ded7e7;background:#ffffff06;border-radius:8px;padding:13px;margin:6px 0 14px}.ai-review-prompt code{color:#c4a0fc;font-family:inherit}
.ai-review-bottom{display:flex;justify-content:space-between;align-items:center;gap:9px;font-size:11px;color:#aaa2b6}
[data-illustration="ai"]:is([data-phase="review"],[data-phase="saving"],[data-phase="widget"],[data-phase="done"]) .ai-builder{opacity:0;transform:translateY(-9px);pointer-events:none}
[data-illustration="ai"]:is([data-phase="review"],[data-phase="saving"]) .ai-review{opacity:1;transform:none}
[data-phase="saving"] .ai-save-button{transform:translateY(2px);background:#8043c5}[data-phase="saving"] .ai-save-button>.ui-cursor{opacity:1;transform:none}
[data-phase="generate"] .ai-generate-button>.ui-cursor{opacity:1;transform:none}
[data-phase="generate"] .ai-generate-button{transform:translateY(2px);background:#8442d7}
[data-phase="generating"] .ai-generate-label{display:none}[data-phase="generating"] .ai-generating{display:inline-flex;align-items:center;gap:7px}
.ui-spinner{width:12px;height:12px;border:1.5px solid #ffffff60;border-top-color:#fff;border-radius:50%;animation:ui-spin .8s linear infinite}
[data-phase="generating"] .typing-caret,[data-phase="generate"] .typing-caret{opacity:0}
.widget-stage{align-items:flex-start;padding-top:38px}.widget-scene{position:relative;width:100%;min-height:340px;display:grid;align-items:start}
.selection-document{padding:0 9px 18px;color:#3c3743;font-size:clamp(16px,4cqw,21px);line-height:1.8;letter-spacing:-.02em}
.ui-illustration .document-label{display:block;font-size:10px;color:#a09aa5;letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px}
.selected-text{background:linear-gradient(#ddc5ff,#ddc5ff) no-repeat left bottom;background-size:0% 100%;border-radius:3px;transition:background-size .75s cubic-bezier(.2,.7,.3,1);padding:2px 1px;color:inherit}
.action-widget{display:flex;align-items:center;gap:var(--widget-gap);width:max-content;max-width:100%;padding:var(--widget-padding);border-radius:11px;background:#29282c;color:#f1eef4;border:1px solid #454149;box-shadow:0 9px 22px #35233f18;font-size:var(--widget-font);white-space:nowrap;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s}
.widget-chip{display:flex;flex:0 0 auto;gap:var(--widget-gap);align-items:center;padding:var(--widget-chip-y) var(--widget-chip-x);line-height:1.2}.widget-chip-accent{background:#995bfa21;color:#c294ff;border-radius:6px;justify-content:center}.widget-chip-muted{color:#bbb5c3}.widget-chip .ui-icon{width:var(--widget-icon);height:var(--widget-icon)}.widget-divider{height:22px;width:1px;background:#57505f}
.result-card{background:#29282c;border:1px solid #454149;border-radius:12px;color:#efebf4;margin:14px 12px 0;padding:18px;box-shadow:0 12px 25px -13px #33213d55;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.result-title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#dcd5e6}.result-title .ui-icon{width:19px;height:19px;color:#b681ff}.result-languages{font-size:12px;color:#aaa2b4;margin-left:auto}
.currency-amount{font-size:clamp(28px,8cqw,40px);font-weight:600;letter-spacing:-.04em;margin:12px 0 2px}.currency-rate{color:#aea7b8;font-size:12px;line-height:1.6}
.result-tools{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-top:18px}.result-tools .ui-button{font-size:13px;min-height:32px;padding:6px 10px}.translation-text{font-size:clamp(18px,4.5cqw,24px);line-height:1.55;letter-spacing:-.01em;margin:15px 0 10px}
.community-ui{padding:20px}.community-title{display:flex;align-items:center;justify-content:space-between;gap:8px}.community-title .ui-heading{font-size:16px}.community-title .ui-button{font-size:10px;min-height:27px;padding:4px 7px}
.community-tabs{display:flex;align-items:center;gap:4px;margin:21px 0 18px;padding:4px;border-radius:7px;background:#ffffff06;color:#b9b1c3;font-size:10px}.community-tabs span{padding:6px 7px;border-radius:4px}.community-tabs .active-tab{background:#995bf0;color:white;font-weight:600}
.community-entry{display:flex;align-items:center;gap:10px;background:#ffffff05;border-radius:8px;padding:13px 10px;margin:8px 0;border:1px solid transparent;transition:border-color .3s,background .3s}
.community-entry>.ui-icon{color:#c0a5e0;width:22px;height:22px}.community-entry-text{flex:1;min-width:0}.community-entry strong{display:block;font-size:14px;color:#eee!important;line-height:1.4}.community-entry small{display:block;font-size:11px;color:#a8a0b2;line-height:1.5;margin-top:3px}.community-entry .ui-button{min-height:32px;font-size:12px;padding:6px 10px;position:relative}.community-added{display:none}
.community-confirmation{display:flex;align-items:center;gap:7px;font-size:11px;color:#a6d8bb;padding:11px 2px 0;opacity:0;transition:opacity .4s}
[data-phase="add"] .community-target .ui-click-target>.ui-cursor{opacity:1;transform:none}[data-phase="add"] .community-target .ui-button{transform:translateY(2px);background:#8043c5}
[data-phase="adding"] .community-target,[data-phase="added"] .community-target{background:#9857ef15;border-color:#9c6bd049}
[data-phase="added"] .community-add-label{display:none}[data-phase="added"] .community-added{display:inline-flex;align-items:center;gap:4px}[data-phase="added"] .community-target .ui-button{background:#305544;border-color:#3e6954;color:#bce7ce}[data-phase="added"] .community-confirmation{opacity:1}
.keyboard-scene{width:100%}.keyboard-selection{font-size:clamp(18px,4.5cqw,24px);line-height:1.5;color:#3b3444;letter-spacing:-.025em;margin-bottom:32px;text-align:center}.keyboard-selection .document-label{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:#968b9e;margin-bottom:13px;display:block}
.key-press-row{display:flex;gap:12px;justify-content:center;margin:0 0 28px}.key-press-row kbd{display:flex;align-items:center;justify-content:center;width:clamp(58px,16cqw,77px);height:clamp(61px,17cqw,82px);font:500 31px/1 -apple-system,BlinkMacSystemFont,sans-serif;border-radius:11px;border:1px solid #d8d3df;border-bottom-width:5px;background:#f9f7fc;color:#5f536b;box-shadow:0 7px 15px -12px #311c43;transition:transform .16s,box-shadow .16s,background .16s,border-color .16s}
.keyboard-action-label{display:flex;align-items:center;justify-content:center;gap:8px;color:#7b6a8a;font-size:12px}.keyboard-action-label .ui-icon{width:16px;height:16px}
.keyboard-result{margin:22px 0 0;transition:opacity .16s,transform .16s}.keyboard-result .translation-text{font-size:22px}.keyboard-result .result-tools{margin-top:13px}
[data-illustration="keyboard"] .selected-text{background-size:100% 100%}
[data-phase="press"] .key-press-row kbd{transform:translateY(4px);background:#e9dafa;border-color:#c2a2e8;box-shadow:none}[data-phase="press"] .key-press-row kbd:nth-child(2){transition-delay:.07s}[data-phase="press"] .key-press-row kbd:nth-child(3){transition-delay:.14s}
[data-phase="done"] .keyboard-result{opacity:1;transform:none}
@keyframes ui-caret{0%,49%{opacity:1}50%,100%{opacity:0}}@keyframes ui-spin{to{transform:rotate(360deg)}}
[data-running="false"] *,[data-running="false"] *::before,[data-running="false"] *::after{animation-play-state:paused!important}
@media(max-width:1050px){.illustration-stage{padding:24px 18px 50px;min-height:375px}.ai-builder,.ai-review{padding:17px}.community-ui{padding:15px}.community-tabs span{padding:6px}.result-card{margin-inline:3px;padding:15px}.community-title .ui-heading{font-size:14px}}
@media(max-width:767px){.illustration-stage{min-height:375px;aspect-ratio:auto;padding:28px 16px 50px}.ui-illustration .ui-heading{font-size:14px}.ai-prompt{font-size:14px;min-height:86px}.ai-model{font-size:10px}.ui-illustration .ui-help{font-size:11px}.ai-footer .ui-button{font-size:11px;padding:6px 8px}.widget-stage{min-height:425px;padding-top:32px}.selection-document{font-size:17px}.community-tabs{font-size:9px}.community-entry{gap:8px}.keyboard-stage{min-height:450px}.key-press-row{gap:10px}.key-press-row kbd{width:62px;height:67px}.keyboard-selection{font-size:20px}.keyboard-result .translation-text{font-size:19px}}
@media(prefers-reduced-motion:reduce){.ui-illustration *{animation:none!important;transition:none!important}.motion-toggle{display:none}.typing-caret{display:none}}


/* These flows grow with their result content instead of clipping to an aspect ratio. */
.ui-illustration .widget-stage,.ui-illustration .keyboard-stage{aspect-ratio:auto}

/* Creation ends in the working widget, with the new action in first position. */
.ai-model-provider{display:flex;align-items:center;gap:6px;color:#e0d9e8;flex-wrap:wrap}.ai-model-provider small{font-size:9px;color:#9dd8b7}.connected-dot{width:6px;height:6px;border-radius:50%;background:#80cda4;flex:none}.ai-model-selected{white-space:nowrap}
.ai-widget-complete{grid-area:1/1;min-width:0;opacity:0;transform:translateY(8px);transition:opacity .3s,transform .35s;pointer-events:none}
.ai-created-chip{display:table;margin:0 auto 26px;padding:7px 12px;border:1px solid #d3e8dc;border-radius:30px;background:#edf8f1;color:#37734e;font:500 12px/1.5 -apple-system,BlinkMacSystemFont,Inter,sans-serif}
.ai-created-chip .ui-icon{width:15px;height:15px;margin-right:5px;color:#43855b}
.ai-widget-complete .selected-text{background-size:100% 100%}.ai-widget-complete .selection-document{font-size:clamp(15px,3.8cqw,20px)}
.ai-result-widget{width:max-content;max-width:100%;padding:var(--widget-padding);border-radius:12px}
.ai-widget-tools{display:flex;align-items:center;gap:var(--widget-gap);min-width:0;font-size:var(--widget-font);white-space:nowrap}
/* Intrinsic chip width enters the same row and pushes the existing actions right. */
.ai-insert-slot{display:flex;flex:0 0 auto;width:max-content;min-width:0;max-width:0;overflow:hidden;opacity:0;margin-right:0;transition:max-width .38s cubic-bezier(.2,.7,.3,1),opacity .24s,margin-right .38s}
.ai-inserted-action{display:flex;flex:0 0 auto;width:max-content;align-items:center;gap:var(--widget-gap);padding:calc(var(--widget-chip-y) + 1px) calc(var(--widget-chip-x) + 2px);border:1px solid #75c995;border-radius:7px;background:#995bfa24;color:#cca7ff;font-size:inherit;line-height:1.2;white-space:nowrap;transform:translateX(-6px);transition:transform .38s}
.ai-inserted-action .ui-icon{width:var(--widget-icon);height:var(--widget-icon)}.ai-inserted-action strong{font-weight:500;color:inherit}
[data-illustration="ai"]:is([data-phase="widget"],[data-phase="done"]) .ai-widget-complete{opacity:1;transform:none}
[data-illustration="ai"][data-phase="done"] .ai-insert-slot{max-width:240px;opacity:1;margin-right:4px}
[data-illustration="ai"][data-phase="done"] .ai-inserted-action{transform:none}
/* Four independent text-selection examples share one stable result area. */
.conversion-demo{grid-area:1/1;min-width:0;opacity:0;transform:translateY(8px);transition:opacity .25s,transform .3s;pointer-events:none}
[data-demo="currency"]>.illustration-stage .currency-demo,[data-demo="timezone"]>.illustration-stage .timezone-demo,[data-demo="distance"]>.illustration-stage .distance-demo,[data-demo="translation"]>.illustration-stage .translation-demo{opacity:1;transform:none}
.ui-illustration[data-illustration="widget"] .selected-text{background-size:0% 100%;transition:background-size .55s cubic-bezier(.2,.7,.3,1)}
.ui-illustration[data-step="preview"] .selected-text,.ui-illustration[data-step="click"] .selected-text,.ui-illustration[data-step="result"] .selected-text{background-size:100% 100%}
[data-step="preview"] .conversion-demo .action-widget,[data-step="click"] .conversion-demo .action-widget,[data-step="result"] .conversion-demo :is(.action-widget,.result-card){opacity:1;transform:none}
[data-step="click"] .conversion-demo .ui-click-target>.ui-cursor{opacity:1;transform:none}[data-step="click"] .conversion-demo .widget-chip-accent{background:#8145c2;transform:translateY(1px)}
[data-phase="overview"] .widget-scene{display:flex;flex-direction:column;gap:24px}
[data-phase="overview"] .conversion-demo{opacity:1;transform:none}
[data-phase="overview"] .conversion-demo .selected-text{background-size:100% 100%}
[data-phase="overview"] .conversion-demo .action-widget,[data-phase="overview"] .translation-demo .result-card{opacity:1;transform:none}
[data-phase="overview"] .conversion-demo:not(.translation-demo) .result-card,[data-phase="overview"] .translation-demo .action-widget{display:none}
[data-phase="overview"] .selection-document{padding-bottom:8px}.ui-illustration[data-phase="overview"] .document-label{display:none}
@media(max-width:767px){.ai-model-provider{gap:4px}.ai-review-bottom{flex-wrap:wrap}.ai-created-chip{margin-bottom:20px}}
/* Keep the floating controls readable at each illustration width. Secondary
   controls disappear first, so the new action and result labels stay complete. */
@container(max-width:620px){.ai-tool-ai{display:none}}
@container(max-width:520px){.illustration-stage{--widget-font:14px;--widget-icon:18px;--widget-chip-y:7px;--widget-chip-x:7px;--widget-gap:5px;--widget-padding:8px}}
@container(max-width:440px){.ai-tool-translate{display:none}}
@container(max-width:400px){.action-widget .widget-chip-secondary{display:none}.result-title{flex-wrap:wrap}.result-languages{font-size:11px}.ai-footer{flex-wrap:wrap}}
@container(max-width:330px){.illustration-stage{--widget-font:13px;--widget-icon:16px;--widget-chip-x:5px;--widget-gap:4px}.ai-widget-tools>.widget-chip:last-child{display:none}.result-title{font-size:13px}.result-tools .ui-button{font-size:12px;padding:6px 8px}.community-entry{padding-inline:8px}.community-entry>.ui-icon{width:18px;height:18px}.community-entry .ui-button{font-size:11px;padding-inline:7px}}