/* Real HTML UI over the existing approved 3D laptop; illustrative, never sends traffic. */
html:root body#ag-unified-site #main .lp-demo{container-type:inline-size;position:relative;width:100%;max-width:660px;margin:0 0 0 auto;min-width:0;color:#142c50;font-family:inherit;font-size:16px;line-height:1.35;isolation:isolate;}
html:root body#ag-unified-site #main .lp-demo *{box-sizing:border-box;}
html:root body#ag-unified-site #main .lp-demo :is(span,html:root body#ag-unified-site #main strong,html:root body#ag-unified-site #main b,html:root body#ag-unified-site #main figcaption){font-size:16px!important;line-height:1.35!important;letter-spacing:normal!important;}
html:root body#ag-unified-site #main .lp-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;}
html:root body#ag-unified-site #main .lp-live{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid #a8e6cb;border-radius:999px;background:#edfff5;color:#08683f;font-weight:700;}
html:root body#ag-unified-site #main .lp-live>i{width:9px;height:9px;border-radius:50%;background:#12b56b;box-shadow:0 0 0 4px #12b56b20;animation:lpLive 1.8s infinite;}
html:root body#ag-unified-site #main .lp-stage{position:relative;width:100%;aspect-ratio:660/369;animation:lpFloat 7s ease-in-out infinite;}
html:root body#ag-unified-site #main .lp-stage img.lp-bg{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:fill!important;display:block;border-radius:22px;transform:none!important;filter:none!important;}
html:root body#ag-unified-site #main .lp-screen{position:absolute;left:31.67%;top:15.18%;width:41.97%;height:54.2%;transform-origin:0 0;transform:skew(-4deg,3deg);background:linear-gradient(135deg,#fff,#f0f7ff);padding:8px;border:1px solid #d8e6f8;border-radius:4px;box-shadow:inset 0 1px 4px #fff,0 2px 4px #1d3e6b20;}
html:root body#ag-unified-site #main .lp-top{display:flex;align-items:center;gap:6px;height:27px;border-bottom:1px solid #dce8f7;margin-bottom:8px;}
html:root body#ag-unified-site #main .lp-brand-mark{display:grid;place-items:center;width:22px;height:22px;background:linear-gradient(135deg,#397afa,#2941aa);border-radius:6px;color:white;font-weight:800;}
html:root body#ag-unified-site #main .lp-window-dots{margin-left:auto;color:#7591b2;letter-spacing:2px!important;}
html:root body#ag-unified-site #main .lp-dashboard{display:grid;grid-template-columns:104px minmax(0,1fr);gap:8px;height:calc(100% - 35px);}
html:root body#ag-unified-site #main .lp-sidebar{display:flex;flex-direction:column;gap:3px;border-right:1px solid #dfebf9;padding-right:5px;}
html:root body#ag-unified-site #main .lp-sidebar>span{padding:5px 3px;white-space:nowrap;color:#355579;}
html:root body#ag-unified-site #main .lp-sidebar .lp-selected{background:#deedff;border-radius:5px;color:#164d9b;font-weight:700;}
html:root body#ag-unified-site #main .lp-chart{display:flex;flex-direction:column;gap:5px;min-width:0;}
html:root body#ag-unified-site #main .lp-chart strong{white-space:nowrap;}
html:root body#ag-unified-site #main .lp-bars,html:root body#ag-unified-site #main .lp-mini-bars{display:flex;align-items:flex-end;justify-content:space-between;gap:7px;height:83px;border-bottom:1px solid #c4d9f3;padding:0 3px 2px;}
html:root body#ag-unified-site #main .lp-bars>i,html:root body#ag-unified-site #main .lp-mini-bars>i{display:block;flex:1;height:var(--h);max-width:21px;transform-origin:bottom;border-radius:3px 3px 1px 1px;background:linear-gradient(#56c5ff,#1663e6);box-shadow:1px 0 3px #1367d836;animation:lpBar 2.6s var(--d) ease-in-out infinite alternate;}
html:root body#ag-unified-site #main .lp-floating{position:absolute;background:linear-gradient(140deg,#fff,#f0f7ff);border:1px solid #c4dbf6;border-radius:12px;box-shadow:0 12px 25px #0b326431,inset 0 1px 0 #fff;padding:10px;}
html:root body#ag-unified-site #main .lp-card-heading{display:flex;align-items:center;gap:6px;}
html:root body#ag-unified-site #main .lp-icon,html:root body#ag-unified-site #main .lp-bell{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:#1474e9;}
html:root body#ag-unified-site #main .lp-icon>svg,html:root body#ag-unified-site #main .lp-bell>svg{width:23px;height:23px;display:block;}
html:root body#ag-unified-site #main .lp-new{left:4.85%;top:16.26%;width:22.12%;height:39.3%;display:flex;flex-direction:column;justify-content:space-between;animation:lpArrival 9s ease infinite;}
html:root body#ag-unified-site #main .lp-mini-bars{height:45px;gap:7px;}
html:root body#ag-unified-site #main .lp-auto{left:77.27%;top:5.42%;width:20.91%;height:38.48%;display:flex;flex-direction:column;gap:5px;}
html:root body#ag-unified-site #main .lp-auto>.lp-icon{justify-content:flex-start;}
html:root body#ag-unified-site #main .lp-status{position:relative;min-height:43px;margin-top:auto;}
html:root body#ag-unified-site #main .lp-typing,html:root body#ag-unified-site #main .lp-sent{display:flex;align-items:center;gap:4px;position:absolute;inset:0;white-space:nowrap;}
html:root body#ag-unified-site #main .lp-typing{animation:lpTyping 9s infinite;}
html:root body#ag-unified-site #main .lp-typing>i{height:4px;width:4px;background:#2269c8;border-radius:50%;animation:lpDot 1s infinite alternate;}
html:root body#ag-unified-site #main .lp-typing>i:nth-child(2){animation-delay:.2s;}
html:root body#ag-unified-site #main .lp-typing>i:nth-child(3){animation-delay:.4s;}
html:root body#ag-unified-site #main .lp-sent{color:#086b44;animation:lpSent 9s infinite;opacity:0;visibility:hidden;white-space:normal;}
html:root body#ag-unified-site #main .lp-sent>svg{width:16px;height:16px;flex-shrink:0;}
html:root body#ag-unified-site #main .lp-follow{left:75%;top:47.43%;width:23.18%;height:30%;display:flex;flex-direction:column;justify-content:space-between;}
html:root body#ag-unified-site #main .lp-bell{position:relative;}
html:root body#ag-unified-site #main .lp-bell>svg{animation:lpBell 1.8s ease-in-out infinite;}
html:root body#ag-unified-site #main .lp-bell::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid #4cafff;animation:lpRing 1.8s ease-out infinite;}
html:root body#ag-unified-site #main .lp-base{display:none;}
html:root body#ag-unified-site #main .lp-workflow{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:12px 0 8px;padding:8px 12px;border:1px solid #cadcf4;border-radius:10px;background:#ffffffcf;}
html:root body#ag-unified-site #main .lp-workflow>b{color:#2674d7;}
html:root body#ag-unified-site #main .lp-demo figcaption{color:#425a79;margin:0;}
@container (max-width:649px){
html:root body#ag-unified-site #main .lp-stage{aspect-ratio:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;animation:none;padding-top:4px;}
html:root body#ag-unified-site #main .lp-stage img.lp-bg{display:none!important;}
html:root body#ag-unified-site #main .lp-screen{position:relative;inset:auto;grid-column:1/-1;width:100%;height:270px;transform:none;border:8px solid #172f50;border-radius:15px;padding:12px;box-shadow:inset 0 1px 1px #fff,0 10px 26px #15345b29;}
html:root body#ag-unified-site #main .lp-dashboard{grid-template-columns:110px minmax(0,1fr);gap:12px;height:calc(100% - 40px);}
html:root body#ag-unified-site #main .lp-top{margin-bottom:12px;}
html:root body#ag-unified-site #main .lp-sidebar>span{padding:9px 3px;}
html:root body#ag-unified-site #main .lp-chart{justify-content:space-between;}
html:root body#ag-unified-site #main .lp-bars{height:132px;}
html:root body#ag-unified-site #main .lp-base{display:block;grid-column:1/-1;height:14px;margin-top:-14px;border:1px solid #a2b8ce;border-radius:0 0 24px 24px;background:linear-gradient(#e7f1fa,#b8c9dc 60%,#849ab3);box-shadow:0 10px 14px #15345b24;}
html:root body#ag-unified-site #main .lp-floating{position:relative;inset:auto;width:100%;height:148px;padding:12px;}
html:root body#ag-unified-site #main .lp-follow{grid-column:1/-1;height:90px;}
html:root body#ag-unified-site #main .lp-workflow{display:grid;grid-template-columns:minmax(0,1.1fr) auto minmax(0,.8fr) auto minmax(0,1.3fr);align-items:center;padding:8px 0;background:none;border:0;gap:4px;}
html:root body#ag-unified-site #main .lp-demo figcaption{padding-right:62px;}
}
html:root body#ag-unified-site #main .lp-demo[data-paused="true"] *,html:root body#ag-unified-site #main .lp-demo[data-paused="true"] *::after{animation-play-state:paused!important;}
@media(prefers-reduced-motion:reduce){
html:root body#ag-unified-site #main .lp-demo *,html:root body#ag-unified-site #main .lp-demo *::after{animation:none!important;}
html:root body#ag-unified-site #main .lp-typing{display:none!important;}
html:root body#ag-unified-site #main .lp-sent{opacity:1!important;visibility:visible!important;}
}
@keyframes lpFloat{50%{transform:translateY(-3px)}}
@keyframes lpLive{50%{box-shadow:0 0 0 7px #12b56b10}}
@keyframes lpBar{from{transform:scaleY(.65)}to{transform:scaleY(1)}}
@keyframes lpArrival{0%,100%{opacity:0;transform:translateY(8px)}9%,90%{opacity:1;transform:translateY(0)}}
@keyframes lpTyping{0%,32%{opacity:1;visibility:visible}38%,100%{opacity:0;visibility:hidden}}
@keyframes lpSent{0%,36%{opacity:0;visibility:hidden}42%,100%{opacity:1;visibility:visible}}
@keyframes lpDot{to{transform:translateY(-3px);opacity:.4}}
@keyframes lpBell{0%,70%,100%{transform:rotate(0)}10%,30%{transform:rotate(12deg)}20%,40%{transform:rotate(-12deg)}}
@keyframes lpRing{from{opacity:.65;transform:scale(.8)}to{opacity:0;transform:scale(1.65)}}
