.implementation-demo{position:fixed;z-index:8;left:6vw;top:50%;transform:translateY(-48%);width:40vw;max-width:600px;color:#e7efef;font:12px/1.5 Space,Arial,sans-serif}
.implementation-demo[hidden]{display:none}.demo-caption{display:flex;justify-content:space-between;font-size:8px;letter-spacing:.1em;color:#9daeb8;margin:0 0 12px}.demo-caption span:last-child{color:#8b9dce}
.demo-shell{background:#141b22;border:1px solid #7e94ae40;border-radius:12px;box-shadow:0 24px 80px #0005;overflow:visible}.demo-toolbar{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #899ab321;padding:15px 20px}.demo-toolbar strong{font-weight:500;display:flex;align-items:center;gap:10px}.demo-mark{display:grid;place-items:center;width:22px;height:22px;background:#c1d3e8;color:#182531;border-radius:6px;font-size:17px;font-weight:600}.demo-avatar{width:25px;height:25px;display:inline-grid;place-items:center;background:#8296b51c;border:1px solid #a6bcda25;border-radius:50%;font-size:9px;color:#ccd8e9}
.demo-breadcrumb{padding:16px 20px 8px;font-size:9px;color:#a7b6c4}.demo-breadcrumb span{padding:0 8px;color:#536579}.demo-title{padding:4px 20px 14px;display:flex;justify-content:space-between;gap:8px;align-items:center}.demo-title h3{font:500 20px/1.2 Space,Arial,sans-serif;letter-spacing:-.04em;margin:0}.demo-state{font-size:8px;white-space:nowrap;border:1px solid #9cacc132;padding:4px 7px;border-radius:4px;color:#b2bed0}.demo-state.complete{color:#c4e6db;border-color:#a1d8c24d}
.demo-message{margin:0 20px;padding:14px;background:#1c252f;border:1px solid #879bb922;border-radius:7px}.demo-message>div{display:flex;align-items:center;gap:9px}.demo-message strong{font-size:10px;font-weight:500}.demo-message small{font-size:8px;color:#9bafc1;margin-left:6px}.demo-message p{font-size:12px;line-height:1.55;margin:10px 0 0;max-width:350px}
.demo-insight{display:flex;gap:10px;padding:17px 20px 12px}.demo-spark{font-size:18px;color:#b5bff3}.demo-insight strong{font-size:11px;font-weight:500}.demo-insight p{font-size:10px;color:#aebaca;margin:4px 0 0;max-width:320px}.demo-task{border:1px solid #a6bce63a;background:#8299d20a;border-radius:7px;margin:0 20px;padding:13px}.demo-task-label{font-size:7px;letter-spacing:.11em;color:#a6b6d7}.demo-task h4{font:500 13px/1.4 Space,Arial,sans-serif;letter-spacing:-.02em;margin:7px 0 10px}.demo-tags{display:flex;gap:6px}.demo-tags span{font-size:8px;color:#bfcee0;border:1px solid #7189a32e;padding:3px 6px;border-radius:3px}
.demo-approval{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 20px}.demo-approval>span{font-size:10px}.demo-approval small{font-size:8px;color:#98acbf}.demo-approve{border:0;border-radius:5px;min-height:38px;padding:0 12px;background:#d3e2e9;color:#16232e;font-size:10px;white-space:nowrap}.demo-approve span{padding-left:12px}.demo-approve:disabled{background:#9dcbc32b;color:#c5ded7;cursor:default}.demo-receipt{border-top:1px solid #899ab321;padding:11px 20px;font-size:8px;color:#aabccc;display:flex;align-items:center;gap:7px}.demo-status-dot{height:5px;width:5px;border-radius:50%;background:#a8c3d8}.demo-dissolve{border:0;background:transparent;padding:12px 0;color:#b1c1d0;font-size:9px;display:flex;justify-content:space-between;width:100%;min-height:40px}.demo-dust{position:absolute;inset:30px 0 40px;pointer-events:none}.demo-dust i{position:absolute;width:3px;height:3px;background:#b9d0f4;opacity:0;border-radius:1px}.dissolving .demo-shell{background:transparent;border-color:transparent;box-shadow:none}
@media(hover:hover) and (pointer:fine){.demo-approve:not(:disabled):hover{background:#e4eef1}.demo-dissolve:hover{color:#ecf1f5}}
@media(min-width:651px) and (max-height:720px){.implementation-demo{top:49%;transform:translateY(-46%) scale(.82);transform-origin:left center;width:47vw;max-width:620px}}
@media(max-width:650px){.implementation-demo{left:24px;right:24px;top:98px;transform:none;width:auto;max-width:none}.demo-caption{margin-bottom:8px;font-size:7px}.demo-toolbar{padding:9px 12px}.demo-breadcrumb{padding:10px 12px 4px}.demo-title{padding:4px 12px 10px}.demo-title h3{font-size:17px}.demo-message{margin:0 12px;padding:10px}.demo-message p{font-size:11px}.demo-insight{padding:12px}.demo-insight p{font-size:9px}.demo-task{margin:0 12px;padding:10px}.demo-approval{padding:12px}.demo-approval small{font-size:7px}.demo-receipt{padding:9px 12px}.demo-dissolve{font-size:9px}body.demo-reading #integrasjon .copy{opacity:0!important;pointer-events:none!important}body.demo-reading .vignette{opacity:.25}.demo-approve{min-height:44px}}
@media(max-width:650px) and (max-height:700px){.implementation-demo{top:82px}.demo-breadcrumb{display:none}.demo-insight p{display:none}.demo-title{padding-top:12px}.demo-message small{display:none}.demo-receipt{font-size:7px}.demo-approval>span{font-size:9px}}
@media(prefers-reduced-motion:reduce){.implementation-demo *{animation:none!important;transition:none!important}}