/* Handoff pilot. Scoped to one runtime scene; preserves the approved page grid. */
#tools .hp-scene{container-type:inline-size}
#tools .hp-canvas,#tools .hp-canvas *{box-sizing:border-box}
#tools .hp-canvas{position:absolute;inset:0;overflow:hidden;background:radial-gradient(ellipse at 48% 30%,#ffffff 0,transparent 66%),linear-gradient(145deg,#f1f3f6,#e9edf2);font-family:Inter,system-ui,sans-serif;color:#23334f}
#tools .hp-window,
.hero-demo-v2 .hp-window{position:absolute;top:24px;left:50%;width:min(640px,calc(100% - 64px));height:calc(100% - 116px);min-height:0;transform:translateX(-50%);border:1px solid #d6dce7;border-radius:15px;background:#fffefd;box-shadow:0 32px 60px -34px #273d4859,0 3px 10px #1728330a;overflow:hidden;transition:opacity .65s,transform .85s cubic-bezier(.22,.8,.22,1),filter .65s;display:flex;flex-direction:column}
#tools .hp-chrome,
.hero-demo-v2 .hp-chrome{display:flex;align-items:center;flex:0 0 44px;gap:14px;padding:0 17px;border-bottom:1px solid #e4e7ee;background:#f7f8fc;color:#253451;font:600 12px/1.3 Inter,system-ui,sans-serif}
#tools .hp-chrome>b,
.hero-demo-v2 .hp-chrome>b{font:600 12px/1.3 Inter,system-ui,sans-serif}
#tools .hp-dots,
.hero-demo-v2 .hp-dots{display:flex;gap:5px;margin-right:2px}
#tools .hp-dots i,
.hero-demo-v2 .hp-dots i{width:6px;height:6px;border-radius:100%;background:#bcc5d5}
#tools .hp-app,
.hero-demo-v2 .hp-app{display:flex;min-height:0;flex:1}
#tools .hp-rail,
.hero-demo-v2 .hp-rail{flex:0 0 42px;border-right:1px solid #e6eaf1;background:#f5f7fb;display:flex;flex-direction:column;align-items:center;gap:19px;padding:16px 0;color:#73809a;font:18px/1 Inter,system-ui,sans-serif}
#tools .hp-rail i,
.hero-demo-v2 .hp-rail i{width:17px;border-top:1px solid #dce2ed}
#tools .hp-main,
.hero-demo-v2 .hp-main{min-width:0;flex:1;display:flex;flex-direction:column}
#tools .hp-chat-heading,
.hero-demo-v2 .hp-chat-heading{padding:15px 22px 8px;display:flex;justify-content:space-between;align-items:center;font:600 13px/1.3 Inter,system-ui,sans-serif}
#tools .hp-chat-heading i,
.hero-demo-v2 .hp-chat-heading i{font-style:normal;color:#8390a8;margin-left:5px}
#tools .hp-chat-heading small,
.hero-demo-v2 .hp-chat-heading small{letter-spacing:2px;color:#67778e}
#tools .hp-chat-viewport,
.hero-demo-v2 .hp-chat-viewport{position:relative;overflow:hidden;flex:1;min-height:0;margin:0 14px 0 0;mask-image:linear-gradient(to bottom,transparent,#000 12px,#000 calc(100% - 18px),transparent)}
#tools .hp-chat-thread,
.hero-demo-v2 .hp-chat-thread{padding:22px 27px 26px;will-change:transform}
#tools .hp-chat-thread h4,
.hero-demo-v2 .hp-chat-thread h4{margin:0 0 28px;max-width:280px;font:500 22px/1.24 Inter,system-ui,sans-serif;letter-spacing:-.65px;color:#172e54}
#tools .hp-scroll-rail,
.hero-demo-v2 .hp-scroll-rail{position:absolute;right:0;top:14px;bottom:20px;width:3px;background:#ecf0f6;border-radius:4px}
#tools .hp-scroll-rail i,
.hero-demo-v2 .hp-scroll-rail i{position:absolute;top:0;left:0;width:3px;height:20%;border-radius:4px;background:#a6b4cc}
#tools .hp-composer,
.hero-demo-v2 .hp-composer{margin:8px 20px 16px;padding:12px 14px 9px;border:1px solid #dce2ed;border-radius:16px;background:#fafbfe;box-shadow:0 2px 4px #1e332b06;font:400 12px/1.3 Inter,system-ui,sans-serif;color:#73829b}
#tools .hp-composer>div,
.hero-demo-v2 .hp-composer>div{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
#tools .hp-composer b,
.hero-demo-v2 .hp-composer b{font:400 20px/1 Inter,system-ui,sans-serif}
#tools .hp-composer i,
.hero-demo-v2 .hp-composer i{font:500 15px/1 Inter,system-ui,sans-serif;background:#183c78;color:#fff;width:24px;height:24px;display:grid;place-items:center;border-radius:50%}
#tools .hp-doneness{position:absolute;z-index:4;right:max(44px,calc((100% - 640px)/2 + 18px));bottom:124px;width:278px;padding:18px;border:1px solid #efccd4;border-radius:15px;background:linear-gradient(140deg,#fff9f7,#ffedef);box-shadow:0 18px 48px -14px #5a342d45;opacity:0;transform:translateY(18px);pointer-events:none;transition:opacity .45s,transform .6s cubic-bezier(.22,.8,.22,1)}
#tools .hp-gauge-head{display:flex;justify-content:space-between;align-items:center;color:#68645b;font:600 10px/1.2 Inter,system-ui,sans-serif;letter-spacing:1px;text-transform:uppercase}
#tools .hp-gauge-head small{font:400 10px/1.3 Inter,system-ui,sans-serif;letter-spacing:0;text-transform:none;color:#82766b}
#tools .hp-doneness strong{display:block;margin:9px 0 14px;font:500 26px/1.2 Georgia,serif;letter-spacing:-.6px;color:#c9153a}
#tools .hp-gauge-track{height:7px;background:linear-gradient(90deg,#7d9fce 0%,#dfcf78 43%,#e98b82 65%,#ff315b);border-radius:8px;position:relative;margin-bottom:16px}
#tools .hp-gauge-track i{position:absolute;left:calc(8% + var(--hp-gauge,0)*84%);top:-4px;width:4px;height:15px;border:1px solid #fff;background:#48342e;border-radius:3px;box-shadow:0 2px 4px #0002}
#tools .hp-canvas .hp-go{width:100%;min-height:36px;border:1px solid #183c78;border-radius:8px;background:#183c78;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 12px;font:600 12px/1 Inter,system-ui,sans-serif;cursor:pointer}
#tools .hp-go span{font-size:17px}
#tools .hp-output{opacity:0;transform:translate(-50%,22px) scale(.97);pointer-events:none}
#tools .hp-wordmark{display:flex;align-items:center;gap:5px;font:700 18px/1 Inter,system-ui,sans-serif;letter-spacing:-1.1px;color:#16396e}
#tools .hp-wordmark i{width:5px;height:5px;background:#ff315b;border-radius:50%;align-self:flex-end;margin-bottom:3px}
#tools .hp-output .hp-chrome{background:#f1f5fc;border-color:#dee5f1}
#tools .hp-output .hp-chrome>b{padding-left:14px;border-left:1px solid #d6e0f0;color:#31588b}
#tools .hp-result-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:23px 28px 24px;scrollbar-width:thin;scrollbar-color:#a9b9d6 transparent}
#tools .hp-result-heading>span,#tools .hp-result-section h5{display:block;margin:0;font:700 10px/1.5 Inter,system-ui,sans-serif;letter-spacing:1.1px;color:#315a96}
#tools .hp-result-heading h4{margin:6px 0 12px;font:400 31px/1.15 Georgia,serif;letter-spacing:-1px;color:#162f56}
#tools .hp-result-heading p{font:400 13px/1.65 Inter,system-ui,sans-serif;color:#485770;margin:0}
#tools .hp-result-section{margin-top:20px;padding:17px 0 0;border-top:1px solid #e1e7f0}
#tools .hp-result-section>small{display:block;font:400 10px/1.5 Inter,system-ui,sans-serif;color:#69768c;margin-top:3px}
#tools .hp-result-section ul{padding:0;margin:10px 0 0;list-style:none}
#tools .hp-result-section li{position:relative;padding-left:13px;margin:7px 0 0;font:400 13px/1.6 Inter,system-ui,sans-serif;color:#384c6c}
#tools .hp-result-section li::before{content:"";position:absolute;left:0;top:9px;width:4px;height:4px;background:#4d79b3;border-radius:50%}
#tools .hp-missing{padding:14px 16px;margin-top:18px;background:#fff4f4;border:1px solid #f3dce2;border-radius:9px}
#tools .hp-missing h5{color:#a83750}
#tools .hp-missing h5 span{font:400 10px/1.4 Inter,system-ui,sans-serif;letter-spacing:0}
#tools .hp-missing li::before{background:#ca526b}
#tools .hp-output-base{flex:0 0 51px;padding:0 21px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #dfe6f1;background:#f4f7fd;color:#63738e;font:500 10px/1.3 Inter,system-ui,sans-serif}
#tools .hp-output-base a{color:#234c89;text-decoration:none;display:flex;align-items:center;gap:17px;font:600 12px/1.2 Inter,system-ui,sans-serif}
#tools .hp-cursor{position:absolute;z-index:8;width:34px;height:43px;opacity:0;pointer-events:none;transition:top .9s cubic-bezier(.25,.65,.2,1),left .9s cubic-bezier(.25,.65,.2,1),opacity .25s;filter:drop-shadow(1px 3px 3px #0003)}
#tools .hp-cursor svg{width:34px;height:43px;display:block}
#tools .hp-cursor>i{position:absolute;top:0;left:0;width:25px;height:25px;border:2px solid #c27c55;border-radius:50%;opacity:0;transform:translate(-7px,-7px) scale(.2);transition:transform .4s,opacity .25s}
#tools .hp-cursor-on .hp-cursor{opacity:1}
#tools .hp-click .hp-cursor>i{opacity:.8;transform:translate(-7px,-7px) scale(1.4)}
#tools .hp-controls{position:absolute;left:24px;right:24px;bottom:36px;display:flex;justify-content:center;align-items:center;gap:12px}
#tools .hp-chapters{display:flex;border:1px solid #dce3ee;background:#ffffffb8;border-radius:100px;padding:4px;gap:2px}
#tools .hp-canvas .hp-controls button{border:0;background:transparent;border-radius:100px;min-height:32px;padding:0 10px;color:#67758c;display:inline-flex;align-items:center;gap:6px;font:500 10px/1.3 Inter,system-ui,sans-serif;cursor:pointer}
#tools .hp-controls button i{font-style:normal;font-size:9px;color:#8794aa}
#tools .hp-controls button[aria-current="step"]{color:#244c89;background:#e5edfa;box-shadow:0 1px 3px #1733270a}
#tools .hp-canvas .hp-controls .hp-play{width:36px;min-height:36px;padding:0;justify-content:center;border:1px solid #dce3ee;background:#ffffffb8;font-size:14px;color:#315b93}
#tools .hp-evidence{position:absolute;bottom:12px;left:16px;right:16px;text-align:center;margin:0;color:#6c7890;font:400 10px/1.3 Inter,system-ui,sans-serif}
#tools .hp-canvas button:focus-visible,#tools .hp-canvas a:focus-visible,#tools .hp-result-scroll:focus-visible{outline:2px solid #3e6dc1;outline-offset:3px}
#tools .hp-canvas[data-phase="doneness"] .hp-source{transform:translate(-50%,-4px) scale(.975)}
#tools .hp-canvas[data-phase="doneness"] .hp-doneness{opacity:1;transform:none;pointer-events:auto}
#tools .hp-canvas:is([data-phase="uncooking"],[data-phase="handoff"]) .hp-source{opacity:0;transform:translate(-57%,-6px) scale(.96);pointer-events:none}
#tools .hp-canvas:is([data-phase="uncooking"],[data-phase="handoff"]) .hp-output{opacity:1;transform:translateX(-50%);pointer-events:auto}
@container (max-width:520px){
 #tools .hp-window,
 .hero-demo-v2 .hp-window{width:calc(100% - 28px);top:16px;height:calc(100% - 108px);border-radius:12px}
 #tools .hp-chrome,
 .hero-demo-v2 .hp-chrome{padding:0 12px;gap:10px}
 #tools .hp-chrome .hp-top-meta,
 .hero-demo-v2 .hp-chrome .hp-top-meta{font-size:9px}
 #tools .hp-rail,
 .hero-demo-v2 .hp-rail{display:none}
 #tools .hp-chat-thread,
 .hero-demo-v2 .hp-chat-thread{padding:20px}
 #tools .hp-chat-heading,
 .hero-demo-v2 .hp-chat-heading{padding:14px 20px 8px}
 #tools .hp-quote{max-width:94%;font-size:13px}
 #tools .hp-doneness{right:26px;bottom:116px;width:min(278px,calc(100% - 52px))}
 #tools .hp-result-scroll{padding:18px}
 #tools .hp-result-heading p,#tools .hp-result-section li{font-size:12px}
 #tools .hp-result-heading h4{font-size:27px}
 #tools .hp-output-base{padding:0 13px}
 #tools .hp-output-base>span{max-width:130px}
 #tools .hp-controls{left:10px;right:10px;gap:6px}
 #tools .hp-canvas .hp-controls button{padding:0 7px;font-size:9px;gap:4px}
 #tools .hp-evidence{font-size:9px}
}
@media(prefers-reduced-motion:reduce){#tools .hp-canvas *{transition:none!important}#tools .hp-cursor{display:none!important}}

/* Neutralise legacy page-wide button typography inside this single demo. */
#tools .hp-canvas .hp-controls button{font:500 11px/1.3 Inter,system-ui,sans-serif!important;min-height:36px}
#tools .hp-canvas .hp-controls .hp-play{font-size:14px!important}
#tools .hp-canvas .hp-go{font:600 12px/1.3 Inter,system-ui,sans-serif!important}
@container(max-width:520px){#tools .hp-canvas .hp-controls button{font-size:10px!important;padding:0 7px}#tools .hp-evidence{left:20px;right:20px;bottom:10px}}

/* Kevin's refinement: same inner window dimensions, no outer metadata band. */
section#tools.tw2-tool-section .tw2-scroll-story.tw2-switchboard.tw4-story.tw11-track .tw2-stage:has(.hp-scene.is-active) > .tw2-stage-head{display:none!important}
section#tools.tw2-tool-section .tw2-scroll-story.tw2-switchboard.tw4-story.tw11-track .tw2-stage > .tw2-scene.hp-scene{inset:0!important}
#tools .tw2-stage .hp-window{top:52px;height:calc(100% - 180px)}
#tools .hp-message,
.hero-demo-v2 .hp-message{margin:0 0 24px;max-width:93%}
#tools .hp-message>span,
.hero-demo-v2 .hp-message>span{display:block;font:600 10px/1.3 Inter,system-ui,sans-serif;color:#697b98;margin-bottom:7px}
#tools .hp-message p,
.hero-demo-v2 .hp-message p{margin:0;font:400 14px/1.65 Inter,system-ui,sans-serif;color:#344862}
#tools .hp-message-user,
.hero-demo-v2 .hp-message-user{margin-left:auto;max-width:87%;border-radius:16px 16px 4px 16px;background:#edf2fb;padding:13px 16px}
#tools .hp-message-user>span,
.hero-demo-v2 .hp-message-user>span{color:#31598c}
#tools .hp-chat-thread h4,
.hero-demo-v2 .hp-chat-thread h4{margin-bottom:26px}
#tools .hp-output-base .hp-copy{display:inline-flex;align-items:center;gap:10px;min-height:36px;padding:0 12px;border:1px solid #244d88;border-radius:7px;background:#244d88;color:white;font:600 12px/1.2 Inter,system-ui,sans-serif!important;cursor:pointer}
#tools .hp-copy svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5}
#tools .hp-result-section.hp-user-context p{font:400 13px/1.65 Inter,system-ui,sans-serif;color:#485770;margin:10px 0 0}
#tools .hp-copy-manual{width:100%;height:150px;font:12px/1.5 monospace;border:1px solid #a9b9d6}
@container(max-width:520px){
 #tools .tw2-stage .hp-window{top:40px;height:calc(100% - 172px)}
 #tools .hp-message p,
 .hero-demo-v2 .hp-message p{font-size:13px}
 #tools .hp-message,
 .hero-demo-v2 .hp-message{max-width:96%}
 #tools .hp-message-user,
 .hero-demo-v2 .hp-message-user{max-width:94%}
 #tools .hp-result-section.hp-user-context p{font-size:12px}
 #tools .hp-output-base .hp-copy{padding:0 9px;font-size:11px!important}
}

/* Final beat: demonstrative click; real clipboard only on a user action. */
#tools .hp-message-user,

/* Final beat: demonstrative click; real clipboard only on a user action. */
.hero-demo-v2 .hp-message-user{transition:background .8s,box-shadow .8s}
#tools .hp-message-user>span,
.hero-demo-v2 .hp-message-user>span,#tools .hp-scroll-rail i,.hero-demo-v2 .hp-scroll-rail i{transition:color .8s,background .8s}
#tools .hp-cooked .hp-message-user{background:#fff0f3;box-shadow:inset 2px 0 #ec8298}
#tools .hp-cooked .hp-message-user>span{color:#a3354d}
#tools .hp-cooked .hp-scroll-rail i{background:#d86d86}
#tools .hp-copy-status{display:inline-flex;align-items:center;gap:9px}
#tools .hp-success-check{display:none;flex:none;width:26px;height:26px;border-radius:50%;background:#244d88;color:#fff;place-items:center}
#tools .hp-success-check svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#tools .hp-copy .hp-copied-icon{display:none}
#tools .hp-copy{transition:transform .2s,background .4s,box-shadow .4s}
#tools .hp-copy-press .hp-copy{transform:scale(.96);box-shadow:0 0 0 5px #244d8814}
#tools .hp-complete .hp-success-check{display:grid;background:#21734c;animation:hp-confirm .45s cubic-bezier(.2,.8,.2,1)}
#tools .hp-complete .hp-copy-status{color:#176044;font-weight:600}
#tools .hp-complete .hp-copy .hp-copy-icon{display:none}
#tools .hp-complete .hp-copy .hp-copied-icon{display:block}
#tools .hp-complete .hp-output-base .hp-copy{background:#21734c;color:#fff;border-color:#21734c}
#tools .hp-complete .hp-output{border-color:#9ccbb4;box-shadow:0 0 0 3px #21734c0a,0 32px 60px -34px #273d4859,0 3px 10px #1728330a}
#tools .hp-complete .hp-output-base{background:#eaf7f0;border-top-color:#cce6d8}
#tools .hp-cursor>i{border-color:#3e6dc1}
@keyframes hp-confirm{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){#tools .hp-success-check{animation:none!important}}

#tools .hp-output-base .hp-copy{min-width:136px;justify-content:center}
@container(max-width:520px){#tools .hp-output-base .hp-copy{min-width:118px}}

/* Shared generation beat. The demo clock drives the scan, including pause. */
#tools .uc-processing{position:absolute;inset:44px 0 0;z-index:7;background:#fffefd;overflow:hidden;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s,visibility .4s}
#tools .uc-busy .uc-processing{opacity:1;visibility:visible}
#tools .uc-processing>span{position:absolute;z-index:2;left:50%;top:45%;transform:translate(-50%,-50%);padding:12px 20px;border:1px solid #dbe5f4;border-radius:100px;background:#f1f5fcf2;color:#244d88;white-space:nowrap;font:500 16px/1.3 Inter,system-ui,sans-serif;letter-spacing:-.3px;box-shadow:0 6px 22px #244d880b}
#tools .uc-processing>i{position:absolute;left:20px;right:20px;top:calc(12px + (100% - 24px)*var(--uc-progress,0));height:2px;background:linear-gradient(90deg,transparent,#87a9dd 15%,#315b93 60%,#ff7e9a 85%,transparent);box-shadow:0 -5px 22px 6px #87a9dd25}
#tools .uc-processing>i::before{content:"";position:absolute;left:0;right:0;bottom:2px;height:90px;background:linear-gradient(transparent,#d9e6fa60)}
#tools .uc-busy :is(.hp-result-scroll,.hp-output-base,.mp-subjects,.mp-result-scroll,.mp-output-base){visibility:hidden}