.compact-demo .oprime-brand{--oprime-logo-gap: 12px; --oprime-logo-icon: 54px; --oprime-logo-scale: .24545455; --oprime-logo-font: 36px; --oprime-logo-spacing: .12em; display: inline-flex; align-items: center; gap: var(--oprime-logo-gap); width: fit-content; max-width: 100%; color: inherit;}
.compact-demo .oprime-brand-icon{position: relative; display: inline-block; width: var(--oprime-logo-icon); height: var(--oprime-logo-icon); flex: 0 0 var(--oprime-logo-icon); overflow: hidden;}
.compact-demo .oprime-brand-art{position: absolute; inset: 0px auto auto 0px; width: 220px; height: 220px; transform: scale(var(--oprime-logo-scale)); transform-origin: left top;}
.compact-demo .oprime-mark-outline,.compact-demo .oprime-mark-check,.compact-demo .oprime-mark-ray{position: absolute; display: block; border-radius: 999px;}
.compact-demo .oprime-mark-outline--top{left: 74px; top: 34px; width: 83px; height: 18px; background: linear-gradient(90deg, rgb(47, 128, 255), rgb(41, 121, 252));}
.compact-demo .oprime-mark-outline--arc-top-left{left: 21px; top: 34px; width: 71px; height: 71px; border-top: 18px solid rgb(47, 128, 255); border-left: 18px solid rgb(47, 128, 255); border-radius: 62px 0px 0px;}
.compact-demo .oprime-mark-outline--left{left: 21px; top: 87px; width: 18px; height: 60px; background: linear-gradient(rgb(44, 124, 254), rgb(36, 115, 250));}
.compact-demo .oprime-mark-outline--arc-bottom-left{left: 21px; top: 129px; width: 71px; height: 71px; border-bottom: 18px solid rgb(33, 112, 248); border-left: 18px solid rgb(36, 115, 250); border-radius: 0px 0px 0px 62px;}
.compact-demo .oprime-mark-outline--base{left: 74px; top: 182px; width: 57px; height: 18px; background: linear-gradient(90deg, rgb(32, 112, 248), rgb(27, 107, 246));}
.compact-demo .oprime-mark-outline--tail-diagonal{left: 113px; top: 182px; width: 53.36px; height: 18px; background: rgb(25, 104, 245); transform: rotate(45deg); transform-origin: 9px 9px;}
.compact-demo .oprime-mark-outline--tail-upright{left: 138px; top: 207px; width: 49px; height: 18px; background: rgb(23, 102, 244); transform: rotate(-90deg); transform-origin: 9px 9px;}
.compact-demo .oprime-mark-outline--arc-bottom-right{left: 138px; top: 118px; width: 58px; height: 76px; border-right: 18px solid rgb(19, 98, 243); border-bottom: 18px solid rgb(23, 102, 244); border-radius: 0px 0px 58px;}
.compact-demo .oprime-mark-outline--right{left: 178px; top: 81px; width: 18px; height: 55px; background: rgb(18, 97, 243);}
.compact-demo .oprime-mark-check{z-index: 2; height: 17px; background: rgb(7, 22, 63); transform-origin: 8.5px 8.5px;}
.compact-demo .oprime-mark-check--short{left: 70.5px; top: 107.5px; width: 56.6px; transform: rotate(45deg);}
.compact-demo .oprime-mark-check--long{left: 98.5px; top: 135.5px; width: 99.07px; transform: rotate(-46.975deg);}
.compact-demo .oprime-mark-ray{z-index: 3; height: 11px; transform-origin: 5.5px 5.5px;}
.compact-demo .oprime-mark-ray--amber{left: 159.5px; top: 39.5px; width: 40.12px; background: rgb(245, 168, 0); transform: rotate(-74.055deg);}
.compact-demo .oprime-mark-ray--blue{left: 186.5px; top: 50.5px; width: 38.66px; background: rgb(23, 105, 255); transform: rotate(-40.601deg);}
.compact-demo .oprime-mark-ray--pale{left: 194.5px; top: 71.5px; width: 29px; background: rgb(207, 229, 255);}
.compact-demo .oprime-brand-word{display: inline-flex; align-items: baseline; font-family: Sora, Manrope, Inter, system-ui, sans-serif; font-size: inherit; font-weight: 950; line-height: 1; letter-spacing: 0.12em; white-space: nowrap;}
.compact-demo .oprime-brand .oprime-brand-word{font-size: var(--oprime-logo-font); letter-spacing: var(--oprime-logo-spacing);}
.compact-demo .oprime-brand-opri{color: var(--navy);}
.compact-demo .oprime-brand-dot{margin: 0px 0.06em; color: var(--amber);}
.compact-demo .oprime-brand-me{color: var(--blue);}


.compact-demo .oprime-brand--demo{--oprime-logo-gap: 8px; --oprime-logo-icon: 32px; --oprime-logo-scale: .14545455; --oprime-logo-font: 15px; --oprime-logo-spacing: .08em;}


















































































































































.compact-demo .product-demo{width: min(1240px, 100% - 32px); min-height: 690px; display: grid; grid-template-columns: 188px minmax(0px, 1fr); margin: 0px auto; border: 1px solid rgb(204, 217, 233); border-radius: 8px; background: var(--white); box-shadow: var(--shadow); overflow: hidden;}


.compact-demo .demo-brand .oprime-brand{min-width: 0px;}




















.compact-demo .metric-icon.amber{color: rgb(166, 108, 0); background: rgb(255, 243, 209);}




























.compact-demo .table-avatar.amber{color: rgb(150, 99, 0); background: rgb(255, 243, 209);}




































































.compact-demo .trace-summary-icon.amber{color: rgb(158, 104, 0); background: rgb(255, 243, 209);}











































.compact-demo .value-icon.amber{color: rgb(158, 104, 0); background: rgb(255, 243, 209);}






















































































.compact-demo .impact-icon.amber{color: rgb(158, 104, 0); background: rgb(255, 243, 209);}
























































































































































@media (max-width: 1120px){




.compact-demo .product-demo{grid-template-columns: 165px minmax(0px, 1fr);}







}
@media (max-width: 900px){















.compact-demo .product-demo{grid-template-columns: 1fr;}























}
@media (max-width: 600px){
















.compact-demo .product-demo{width: calc(100% - 16px);}
.compact-demo .demo-brand .oprime-brand-word{display: none;}
































}
@media (max-width: 900px){





}
@media (max-width: 600px){





















}






@media (max-width: 900px){
















}
@media (max-width: 600px){

















}
@media (prefers-reduced-motion: reduce){

}
























































.compact-demo .product-demo{width: var(--content); display: block; margin: 0px auto; border: 1px solid rgb(203, 217, 235); border-radius: 11px; background: rgb(255, 255, 255); box-shadow: rgba(7, 22, 63, 0.12) 0px 25px 65px; overflow: hidden;}
.compact-demo .demo-tabs{display: flex; gap: 4px; padding: 10px; border-bottom: 1px solid var(--line); background: var(--navy);}
.compact-demo .demo-tabs button{min-height: 48px; display: inline-flex; align-items: center; gap: 8px; padding: 0px 18px; border: 0px; border-radius: 6px; color: rgb(185, 202, 227); background: transparent; font-weight: 800; cursor: pointer;}
.compact-demo .demo-tabs button[aria-selected="true"]{color: var(--navy); background: rgb(255, 255, 255);}
.compact-demo .demo-tabs svg{width: 18px; height: 18px;}
.compact-demo .demo-canvas{position: relative; min-height: 440px; padding: 34px;}
.compact-demo .demo-canvas [role="tabpanel"]{min-height: 340px;}
.compact-demo .demo-label{margin: 0px 0px 20px; color: var(--blue); font-size: 11px; font-weight: 850; text-transform: uppercase;}
.compact-demo .demo-metrics{display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 8px; overflow: hidden;}
.compact-demo .demo-metrics article{padding: 22px; border-right: 1px solid var(--line);}
.compact-demo .demo-metrics article:last-child{border: 0px;}
.compact-demo .demo-metrics small{display: block; color: var(--muted); font-size:11px; text-transform: uppercase;}
.compact-demo .demo-metrics strong{display: block; margin-top: 7px; color: var(--navy); font-size: 17px;}











.compact-demo .demo-assignment{max-width: 650px; display: grid; grid-template-columns: repeat(2, 1fr); margin: 0px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden;}
.compact-demo .demo-assignment > div{padding: 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);}
.compact-demo .demo-assignment > div:nth-child(2n){border-right: 0px;}
.compact-demo .demo-assignment > div:nth-last-child(-n+2){border-bottom: 0px;}
.compact-demo .demo-assignment dt{color: var(--muted); font-size:11px; text-transform: uppercase;}
.compact-demo .demo-assignment dd{margin: 6px 0px 0px; color: var(--navy); font-weight: 800;}

.compact-demo .demo-disclaimer{margin: 23px 0px 0px; color: rgb(85, 102, 129); font-size: 12px; font-weight: 800;}























































































































@media (max-width: 1050px){

















}
@media (max-width: 900px){

















.compact-demo .demo-canvas{min-height: 0px;}
.compact-demo .demo-canvas [role="tabpanel"]{min-height: 0px;}



}
@media (max-width: 600px){















.compact-demo .demo-tabs{overflow-x: auto;}
.compact-demo .demo-tabs button{flex: 0 0 auto; padding: 0px 13px;}
.compact-demo .demo-canvas{padding: 20px 14px;}
.compact-demo .demo-metrics{grid-template-columns: 1fr 1fr;}
.compact-demo .demo-metrics article{border-bottom: 1px solid var(--line);}
.compact-demo .demo-metrics article:nth-child(2n){border-right: 0px;}
.compact-demo .demo-metrics article:nth-last-child(-n+2){border-bottom: 0px;}



.compact-demo .demo-assignment{grid-template-columns: 1fr;}
.compact-demo .demo-assignment > div,.compact-demo .demo-assignment > div:nth-child(2n),.compact-demo .demo-assignment > div:nth-last-child(-n+2){border-right: 0px; border-bottom: 1px solid var(--line);}
.compact-demo .demo-assignment > div:last-child{border-bottom: 0px;}
























}




















@media (max-width: 900px){




}
@media (max-width: 600px){




}











.compact-demo .platform .product-demo{width: min(1080px, 100% - 40px);}
.compact-demo .product-demo{border-color: rgb(215, 226, 239); border-radius: 16px; box-shadow: rgba(15, 23, 42, 0.13) 0px 26px 70px;}
.compact-demo .demo-appbar{min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px 18px; border-bottom: 1px solid rgb(219, 228, 240); color: rgb(88, 105, 130); background: rgb(255, 255, 255); font-size: 11px; font-weight: 760;}
.compact-demo .demo-appbar > span:first-child{display: flex; align-items: center; color: var(--navy);}
.compact-demo .demo-app-layout{display: grid; grid-template-columns: 190px minmax(0px, 1fr); min-height: 610px;}
.compact-demo .product-demo .demo-tabs{display: flex; flex-direction: column; gap: 6px; padding: 18px 12px; border-width: 0px 1px 0px 0px; border-style: none solid none none; border-color: currentcolor rgb(219, 228, 240) currentcolor currentcolor; border-image: none; background: rgb(255, 255, 255);}
.compact-demo .product-demo .demo-tabs::before{content: "Módulos"; padding: 0px 10px 8px; color: rgb(138, 151, 171); font-size:11px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase;}
.compact-demo .product-demo .demo-tabs button{width: 100%; min-height: 46px; justify-content: flex-start; gap: 10px; padding: 0px 12px; border: 1px solid transparent; border-radius: 11px; color: rgb(86, 100, 123); background: transparent; font-size: 12px; font-weight: 800; text-align: left;}
.compact-demo .product-demo .demo-tabs button:hover{color: rgb(11, 79, 201); background: rgb(243, 248, 255);}
.compact-demo .product-demo .demo-tabs button[aria-selected="true"]{border-color: rgb(191, 219, 254); color: rgb(11, 79, 201); background: rgb(234, 243, 255); box-shadow: none;}
.compact-demo .product-demo .demo-tabs svg{width: 18px; height: 18px;}
.compact-demo .product-demo .demo-canvas{min-width: 0px; min-height: 610px; padding: 28px; background: rgb(244, 247, 251);}
.compact-demo .product-demo .demo-canvas [role="tabpanel"]{min-height: 505px;}
.compact-demo .preview-heading{display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; margin-bottom: 20px;}
.compact-demo .preview-heading .demo-label{margin-bottom: 5px;}
.compact-demo .preview-heading h3{margin: 0px; color: rgb(15, 23, 42); font-size: 25px; line-height: 1.1;}
.compact-demo .preview-heading p:not(.demo-label){margin: 5px 0px 0px; color: rgb(88, 105, 130); font-size: 12px;}
.compact-demo .preview-heading > span,.compact-demo .preview-filter-row span,.compact-demo .preview-builder article > div > div span,.compact-demo .preview-panel-card > header > span{display: inline-flex; align-items: center; min-height: 28px; padding: 4px 9px; border: 1px solid rgb(191, 219, 254); border-radius: 999px; color: rgb(11, 79, 201); background: rgb(239, 246, 255); font-size:11px; font-weight: 850; white-space: nowrap;}
.compact-demo .preview-dashboard{display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 14px;}
.compact-demo .preview-active-card,.compact-demo .preview-metric-grid article,.compact-demo .preview-panel-card,.compact-demo .preview-builder article,.compact-demo .preview-real-qr{border: 1px solid rgb(219, 228, 240); border-radius: 14px; background: rgb(255, 255, 255); box-shadow: rgba(15, 23, 42, 0.043) 0px 10px 24px;}
.compact-demo .preview-active-card{display: flex; align-items: center; gap: 17px; padding: 17px;}
.compact-demo .preview-active-card > div:last-child{display: grid; gap: 3px;}
.compact-demo .preview-active-card > div:last-child > strong{color: rgb(15, 23, 42); font-size: 13px;}
.compact-demo .preview-active-card > div:last-child > span,.compact-demo .preview-active-card > div:last-child > small{color: rgb(88, 105, 130); font-size:11px;}
.compact-demo .preview-donut{width: 76px; height: 76px; flex: 0 0 76px; display: grid; place-content: center; border-radius: 50%; background: radial-gradient(circle, rgb(255, 255, 255) 52%, transparent 54%), conic-gradient(rgb(18, 94, 229) 0deg, rgb(18, 94, 229) 68%, rgb(219, 234, 254) 68%, rgb(219, 234, 254) 100%); text-align: center;}
.compact-demo .preview-donut strong{color: rgb(15, 23, 42); font-size: 21px; line-height: 1;}
.compact-demo .preview-donut small{color: rgb(88, 105, 130); font-size:11px;}
.compact-demo .preview-metric-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;}
.compact-demo .preview-metric-grid article{display: grid; align-content: center; gap: 3px; padding: 14px;}
.compact-demo .preview-metric-grid span,.compact-demo .preview-metric-grid small{color: rgb(88, 105, 130); font-size:11px;}
.compact-demo .preview-metric-grid strong{color: rgb(15, 23, 42); font-size: 22px;}
.compact-demo .preview-panel-card{margin-top: 14px; padding: 16px;}
.compact-demo .preview-panel-card > header{display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 12px;}
.compact-demo .preview-panel-card > header > div{display: grid; gap: 2px;}
.compact-demo .preview-panel-card > header strong{color: rgb(15, 23, 42); font-size: 13px;}
.compact-demo .preview-panel-card > header small{color: rgb(88, 105, 130); font-size:11px;}
.compact-demo .preview-assignment-row{display: grid; grid-template-columns: 34px minmax(0px, 1fr) auto; align-items: center; gap: 10px; padding: 11px 0px; border-top: 1px solid rgb(231, 237, 245);}
.compact-demo .preview-assignment-row > div{min-width: 0px; display: grid; gap: 2px;}
.compact-demo .preview-assignment-row > div strong{overflow: hidden; color: rgb(15, 23, 42); font-size: 11px; text-overflow: ellipsis; white-space: nowrap;}
.compact-demo .preview-assignment-row > div small{color: rgb(88, 105, 130); font-size:11px;}
.compact-demo .preview-channel{width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid rgb(153, 246, 228); border-radius: 9px; color: rgb(11, 79, 201); background: rgb(236, 253, 245);}
.compact-demo .preview-channel.mail{border-color: rgb(191, 219, 254); color: rgb(29, 78, 216); background: rgb(239, 246, 255);}
.compact-demo .preview-channel svg{width: 16px; height: 16px;}
.compact-demo .preview-status{display: inline-flex; align-items: center; min-height: 25px; padding: 3px 8px; border: 1px solid rgb(167, 243, 208); border-radius: 999px; color: rgb(8, 121, 82); background: rgb(236, 253, 245); font-size:11px; font-weight: 850;}
.compact-demo .preview-status.pending{border-color: rgb(253, 230, 138); color: rgb(146, 64, 14); background: rgb(255, 251, 235);}
.compact-demo .preview-builder{display: grid; gap: 11px;}
.compact-demo .preview-builder article{display: grid; grid-template-columns: 34px 1fr; gap: 13px; padding: 15px; background: linear-gradient(rgb(255, 255, 255), rgb(248, 251, 255));}
.compact-demo .preview-question-number{color: rgb(18, 94, 229); font-size:11px; font-weight: 900;}
.compact-demo .preview-builder article > div{display: grid; gap: 6px;}
.compact-demo .preview-builder article small{color: rgb(88, 105, 130); font-size:11px; font-weight: 800; text-transform: uppercase;}
.compact-demo .preview-builder article strong{color: rgb(15, 23, 42); font-size: 12px;}
.compact-demo .preview-builder article > div > div{display: flex; flex-wrap: wrap; gap: 6px;}
.compact-demo .preview-builder article > div > div span{min-height: 25px; color: rgb(52, 66, 90); border-color: rgb(219, 228, 240); background: rgb(255, 255, 255);}
.compact-demo .preview-builder article > div > div span:last-child{color: rgb(11, 79, 201); border-color: rgb(191, 219, 254); background: rgb(239, 246, 255);}
.compact-demo .preview-builder svg{width: 13px; height: 13px; margin-right: 5px;}
.compact-demo .preview-builder p{margin: 2px 0px 0px; color: rgb(88, 105, 130); font-size:11px;}
.compact-demo .preview-assignment-layout{display: grid; grid-template-columns: minmax(0px, 1fr) 230px; gap: 16px; align-items: stretch;}
.compact-demo .preview-assignment-layout .demo-assignment{max-width: none; height: 100%; background: rgb(255, 255, 255);}
.compact-demo .preview-real-qr{display: grid; place-items: center; align-content: center; gap: 12px; margin: 0px; padding: 17px; text-align: center;}
.compact-demo .preview-real-qr img{width: 150px; height: 150px; padding: 4px; border: 1px solid rgb(226, 232, 240); background: rgb(255, 255, 255);}
.compact-demo .preview-real-qr figcaption{display: grid; gap: 3px;}
.compact-demo .preview-real-qr strong{color: rgb(15, 23, 42); font-size: 11px;}
.compact-demo .preview-real-qr span{color: rgb(88, 105, 130); font-size:11px; line-height: 1.4;}
.compact-demo .preview-filter-row{display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 13px;}
.compact-demo .preview-filter-row span{color: rgb(52, 66, 90); border-color: rgb(219, 228, 240); background: rgb(255, 255, 255);}












.compact-demo .preview-download{display: inline-flex; align-items: center; gap: 6px; color: rgb(255, 255, 255) !important; border-color: rgb(18, 94, 229) !important; background: rgb(18, 94, 229) !important;}
.compact-demo .preview-download svg{width: 13px; height: 13px;}
.compact-demo .preview-report-cover{display: grid; grid-template-columns: minmax(0px, 1fr) 245px; gap: 12px;}
.compact-demo .preview-report-summary,.compact-demo .preview-report-score,.compact-demo .preview-report-trend,.compact-demo .preview-report-ranking{border: 1px solid rgb(229, 234, 242); border-radius: 14px; background: rgb(255, 255, 255); box-shadow: rgba(15, 23, 42, 0.04) 0px 10px 25px;}
.compact-demo .preview-report-summary{padding: 17px; background: rgb(236, 253, 248); border-color: rgb(185, 240, 223);}
.compact-demo .preview-report-summary > span{display: inline-flex; margin-bottom: 8px; color: rgb(8, 121, 94); font-size:11px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase;}
.compact-demo .preview-report-summary p{margin: 0px; color: rgb(39, 67, 90); font-size:11px; line-height: 1.55;}
.compact-demo .preview-report-score{display: grid; grid-template-columns: 90px minmax(0px, 1fr); align-items: center; gap: 13px; padding: 13px;}
.compact-demo .preview-report-ring{width: 82px; height: 82px; display: grid; place-content: center; border-radius: 50%; text-align: center; background: radial-gradient(circle, rgb(255, 255, 255) 57%, transparent 58%), conic-gradient(rgb(18, 184, 166) 0deg, rgb(18, 184, 166) 85%, rgb(227, 233, 241) 85%, rgb(227, 233, 241) 100%);}
.compact-demo .preview-report-ring strong{color: rgb(16, 27, 51); font-size: 19px; line-height: 1;}
.compact-demo .preview-report-ring small{max-width: 58px; margin-top: 4px; color: rgb(102, 116, 138); font-size:11px; line-height: 1.15;}
.compact-demo .preview-report-score > div:last-child{display: grid; gap: 3px;}
.compact-demo .preview-report-score > div:last-child small{color: rgb(89, 103, 127); font-size:11px; font-weight: 800; text-transform: uppercase;}
.compact-demo .preview-report-score > div:last-child strong{color: rgb(16, 27, 51); font-size: 11px;}
.compact-demo .preview-report-metrics{margin-top: 12px;}
.compact-demo .preview-report-analysis{display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 12px; margin-top: 12px;}
.compact-demo .preview-report-trend,.compact-demo .preview-report-ranking{padding: 14px;}
.compact-demo .preview-report-trend > header,.compact-demo .preview-report-ranking > header{display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 11px;}
.compact-demo .preview-report-trend > header > div,.compact-demo .preview-report-ranking > header{color: rgb(16, 27, 51);}
.compact-demo .preview-report-trend > header > div{display: grid; gap: 2px;}
.compact-demo .preview-report-trend header strong,.compact-demo .preview-report-ranking header strong{font-size:11px;}
.compact-demo .preview-report-trend header small,.compact-demo .preview-report-ranking header small{color: rgb(89, 103, 127); font-size:11px;}
.compact-demo .preview-report-trend > header > span{padding: 4px 7px; border: 1px solid rgb(167, 234, 214); border-radius: 999px; color: rgb(8, 121, 94); background: rgb(236, 253, 248); font-size:11px; font-weight: 850;}
.compact-demo .preview-report-trend > div{display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid rgb(229, 234, 242); border-radius: 10px; overflow: hidden;}
.compact-demo .preview-report-trend > div > span{display: grid; gap: 3px; padding: 9px; border-right: 1px solid rgb(229, 234, 242);}
.compact-demo .preview-report-trend > div > span:last-child{border-right: 0px;}
.compact-demo .preview-report-trend > div small{color: rgb(89, 103, 127); font-size:11px;}
.compact-demo .preview-report-trend > div strong{color: rgb(16, 27, 51); font-size: 12px;}
.compact-demo .preview-report-ranking > header{display: grid; gap: 2px;}
.compact-demo .preview-report-ranking > div{display: grid; grid-template-columns: 82px minmax(45px, 1fr) 22px; align-items: center; gap: 7px; margin-top: 8px; color: rgb(52, 66, 90); font-size:11px;}
.compact-demo .preview-report-ranking > div > span{overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.compact-demo .preview-report-ranking > div > i{height: 6px; overflow: hidden; border-radius: 999px; background: rgb(229, 234, 242);}
.compact-demo .preview-report-ranking > div > i > b{display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgb(18, 184, 166), rgb(18, 94, 229));}
.compact-demo .preview-report-ranking .value-92{width: 92%;}
.compact-demo .preview-report-ranking .value-87{width: 87%;}
.compact-demo .preview-report-ranking .value-86{width: 86%;}
.compact-demo .preview-report-ranking .value-100{width: 100%;}
.compact-demo .preview-report-ranking .value-80{width: 80%;}
.compact-demo .preview-report-ranking .value-78{width: 78%;}
.compact-demo .preview-result-switcher{display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 10px; margin-bottom: 14px;}
.compact-demo .preview-result-switcher button{min-width: 0px; display: grid; grid-template-columns: 38px minmax(0px, 1fr) auto; align-items: center; gap: 10px; padding: 12px; border: 1px solid rgb(219, 228, 240); border-radius: 13px; color: rgb(52, 66, 90); background: rgb(255, 255, 255); box-shadow: rgba(15, 23, 42, 0.035) 0px 8px 22px; cursor: pointer; text-align: left; }
.compact-demo .preview-result-switcher button:hover{border-color: rgb(159, 197, 255); background: rgb(248, 251, 255); transform: translateY(-1px);}
.compact-demo .preview-result-switcher button:focus-visible{border-color: rgb(18, 94, 229); box-shadow: rgba(18, 94, 229, 0.16) 0px 0px 0px 3px; outline: 0px;}
.compact-demo .preview-result-switcher button[aria-pressed="true"]{border-color: rgb(143, 188, 255); background: rgb(238, 246, 255); box-shadow: rgb(18, 94, 229) 3px 0px inset, rgba(18, 94, 229, 0.08) 0px 8px 22px;}
.compact-demo .preview-result-switcher .preview-channel{width: 38px; height: 38px;}
.compact-demo .preview-result-switcher button > span:nth-child(2){min-width: 0px; display: grid; gap: 2px;}
.compact-demo .preview-result-switcher button > span:nth-child(2) small{overflow: hidden; color: rgb(89, 103, 127); font-size:11px; font-weight: 760; text-overflow: ellipsis; white-space: nowrap;}
.compact-demo .preview-result-switcher button > span:nth-child(2) strong{overflow: hidden; color: rgb(16, 27, 51); font-size: 11px; text-overflow: ellipsis; white-space: nowrap;}
.compact-demo .preview-result-switcher button > span:nth-child(2) em{overflow: hidden; color: rgb(89, 103, 127); font-size:11px; font-style: normal; text-overflow: ellipsis; white-space: nowrap;}
.compact-demo .preview-result-switcher button > b{display: grid; gap: 2px; color: rgb(11, 79, 201); font-size: 16px; line-height: 1; text-align: right;}
.compact-demo .preview-result-switcher button > b small{color: rgb(89, 103, 127); font-size:11px; font-weight: 760; text-transform: uppercase;}
.compact-demo .preview-result-view{min-width: 0px;}
.compact-demo .preview-result-context{min-width: 0px; display: grid; grid-template-columns: minmax(0px, 1fr) auto; align-items: center; gap: 16px; padding: 14px 16px; border: 1px solid rgb(219, 228, 240); border-radius: 13px; background: linear-gradient(135deg, rgb(255, 255, 255), rgb(247, 250, 255));}
.compact-demo .preview-result-context > div{min-width: 0px; display: grid; justify-items: start; gap: 3px;}
.compact-demo .preview-result-context > div:last-child{min-width: 150px; padding-left: 16px; border-left: 1px solid rgb(227, 234, 243);}
.compact-demo .preview-result-context > div > strong{max-width: 100%; overflow: hidden; color: rgb(16, 27, 51); font-size: 12px; text-overflow: ellipsis; white-space: nowrap;}
.compact-demo .preview-result-context > div > small,.compact-demo .preview-result-context > div > span:not(.preview-result-badge){color: rgb(89, 103, 127); font-size:11px;}
.compact-demo .preview-result-badge{display: inline-flex; align-items: center; gap: 4px; width: fit-content; min-height: 22px; padding: 3px 7px; border: 1px solid rgb(191, 219, 254); border-radius: 999px; color: rgb(29, 78, 216); background: rgb(239, 246, 255); font-size:11px; font-weight: 850; white-space: nowrap;}
.compact-demo .preview-result-badge.qr{color: rgb(8, 121, 94); border-color: rgb(153, 233, 209); background: rgb(236, 253, 248);}
.compact-demo .preview-result-badge svg{width: 11px; height: 11px;}
.compact-demo .preview-assignment-pill{display: inline-flex; padding: 2px 5px; border-radius: 5px; color: rgb(11, 79, 201); background: rgb(231, 240, 255); font-size:11px; font-weight: 900; vertical-align: 1px;}
.compact-demo .preview-result-metrics{margin-top: 11px;}
.compact-demo .preview-result-metrics article{padding: 14px 16px;}
.compact-demo .preview-result-detail-grid{min-width: 0px; display: grid; grid-template-columns: 0.94fr 1.06fr; gap: 11px; margin-top: 11px;}
.compact-demo .preview-result-card,.compact-demo .preview-response-index,.compact-demo .preview-response-detail,.compact-demo .preview-result-aggregates article,.compact-demo .preview-report-responses{min-width: 0px; border: 1px solid rgb(219, 228, 240); border-radius: 14px; background: rgb(255, 255, 255); box-shadow: rgba(15, 23, 42, 0.04) 0px 10px 25px;}
.compact-demo .preview-result-card{padding: 14px;}
.compact-demo .preview-result-card > header,.compact-demo .preview-response-detail > header,.compact-demo .preview-result-aggregates article > header,.compact-demo .preview-report-responses > header{display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 11px; border-bottom: 1px solid rgb(232, 237, 244);}
.compact-demo .preview-result-card > header > div,.compact-demo .preview-response-detail > header > div,.compact-demo .preview-report-responses > header > div{min-width: 0px; display: grid; gap: 2px;}
.compact-demo .preview-result-card > header span,.compact-demo .preview-response-detail > header span,.compact-demo .preview-report-responses > header span{color: rgb(11, 79, 201); font-size:11px; font-weight: 850; text-transform: uppercase;}
.compact-demo .preview-result-card > header strong,.compact-demo .preview-response-detail > header strong,.compact-demo .preview-report-responses > header strong{color: rgb(16, 27, 51); font-size: 11px;}
.compact-demo .preview-result-card > header > b,.compact-demo .preview-response-detail > header > b{flex: 0 0 auto; color: rgb(11, 79, 201); font-size: 16px;}
.compact-demo .preview-trace-grid{display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); margin-top: 5px;}
.compact-demo .preview-trace-grid > div{min-width: 0px; display: grid; gap: 3px; padding: 9px 8px; border-bottom: 1px solid rgb(237, 241, 246);}
.compact-demo .preview-trace-grid > div:nth-child(2n+1){border-right: 1px solid rgb(237, 241, 246);}
.compact-demo .preview-trace-grid > div:nth-last-child(-n+2){border-bottom: 0px;}
.compact-demo .preview-trace-grid span,.compact-demo .preview-response-summary span{color: rgb(89, 103, 127); font-size:11px; text-transform: uppercase;}
.compact-demo .preview-trace-grid strong,.compact-demo .preview-response-summary strong{overflow-wrap: anywhere; color: rgb(16, 27, 51); font-size:11px;}
.compact-demo .preview-answer-list{display: grid;}
.compact-demo .preview-answer-list > div{min-width: 0px; display: grid; gap: 4px; padding: 10px 0px; border-bottom: 1px solid rgb(237, 241, 246);}
.compact-demo .preview-answer-list > div:last-child{padding-bottom: 0px; border-bottom: 0px;}
.compact-demo .preview-answer-list > div > span{color: rgb(11, 79, 201); font-size:11px; font-weight: 820; text-transform: uppercase;}
.compact-demo .preview-answer-list > div > strong{color: rgb(16, 27, 51); font-size:11px; line-height: 1.35;}
.compact-demo .preview-answer-list p{display: flex; align-items: baseline; gap: 7px; margin: 0px; padding: 6px 8px; border-radius: 8px; background: rgb(245, 248, 252);}
.compact-demo .preview-answer-list p small{flex: 0 0 auto; color: rgb(89, 103, 127); font-size:11px; font-weight: 800; text-transform: uppercase;}
.compact-demo .preview-answer-list p b{color: rgb(39, 67, 90); font-size:11px; line-height: 1.4;}
.compact-demo .preview-qr-response-layout{min-width: 0px; display: grid; grid-template-columns: 225px minmax(0px, 1fr); gap: 11px; margin-top: 11px;}
.compact-demo .preview-response-index{align-self: start; padding: 12px;}
.compact-demo .preview-response-index > header{display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 2px 2px 9px;}
.compact-demo .preview-response-index > header > div{display: grid; gap: 2px;}
.compact-demo .preview-response-index > header span{color: rgb(11, 79, 201); font-size:11px; font-weight: 850; text-transform: uppercase;}
.compact-demo .preview-response-index > header strong{color: rgb(16, 27, 51); font-size:11px;}
.compact-demo .preview-response-index > header small{color: rgb(89, 103, 127); font-size:11px;}
.compact-demo .preview-response-index > div{display: grid; gap: 6px;}
.compact-demo .preview-response-index button{min-width: 0px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px; border: 1px solid rgb(225, 232, 241); border-radius: 10px; color: rgb(52, 66, 90); background: rgb(255, 255, 255); cursor: pointer; text-align: left;}
.compact-demo .preview-response-index button:hover{border-color: rgb(159, 197, 255); background: rgb(248, 251, 255);}
.compact-demo .preview-response-index button:focus-visible{border-color: rgb(18, 94, 229); box-shadow: rgba(18, 94, 229, 0.15) 0px 0px 0px 3px; outline: 0px;}
.compact-demo .preview-response-index button[aria-pressed="true"]{color: rgb(11, 79, 201); border-color: rgb(159, 197, 255); background: rgb(238, 246, 255);}
.compact-demo .preview-response-index button > span{min-width: 0px; display: grid; gap: 2px;}
.compact-demo .preview-response-index button strong{color: rgb(16, 27, 51); font-size:11px;}
.compact-demo .preview-response-index button small{overflow: hidden; color: rgb(89, 103, 127); font-size:11px; text-overflow: ellipsis; white-space: nowrap;}
.compact-demo .preview-response-index button > b{flex: 0 0 auto; color: rgb(11, 79, 201); font-size: 13px;}
.compact-demo .preview-response-detail-shell{min-width: 0px;}
.compact-demo .preview-response-detail{padding: 14px;}
.compact-demo .preview-response-detail > header small{color: rgb(89, 103, 127); font-size:11px;}
.compact-demo .preview-response-summary{display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); margin: 10px 0px; border: 1px solid rgb(231, 237, 245); border-radius: 10px; overflow: hidden;}
.compact-demo .preview-response-summary > div{min-width: 0px; display: grid; gap: 3px; padding: 8px; border-right: 1px solid rgb(231, 237, 245); border-bottom: 1px solid rgb(231, 237, 245);}
.compact-demo .preview-response-summary > div:nth-child(3n){border-right: 0px;}
.compact-demo .preview-response-summary > div:nth-last-child(-n+3){border-bottom: 0px;}
.compact-demo .preview-answer-list.compact > div{padding: 8px 0px;}
.compact-demo .preview-result-aggregates{min-width: 0px; display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 11px; margin-top: 11px;}
.compact-demo .preview-result-aggregates article{padding: 13px;}
.compact-demo .preview-result-aggregates article > header{margin-bottom: 9px;}
.compact-demo .preview-result-aggregates article > header > div{display: grid; gap: 2px;}
.compact-demo .preview-result-aggregates article > header strong{color: rgb(16, 27, 51); font-size:11px;}
.compact-demo .preview-result-aggregates article > header small{color: rgb(89, 103, 127); font-size:11px;}
.compact-demo .preview-result-aggregates article > header > b{color: rgb(11, 79, 201); font-size: 15px;}
.compact-demo .preview-result-aggregates article > div{display: grid; grid-template-columns: 42px minmax(0px, 1fr) 14px; align-items: center; gap: 7px; margin-top: 7px; color: rgb(89, 103, 127); font-size:11px;}
.compact-demo .preview-result-aggregates article > div > i{height: 6px; overflow: hidden; border-radius: 999px; background: rgb(229, 234, 242);}
.compact-demo .preview-result-aggregates article > div > i > b{display: block; height: 100%; border-radius: inherit; background: rgb(18, 94, 229);}
.compact-demo .preview-result-aggregates .value-33{width: 33%;}
.compact-demo .preview-result-aggregates .value-67{width: 67%;}
.compact-demo .preview-result-aggregates article > div > i > b.amber{background: rgb(245, 168, 0);}
.compact-demo .preview-report-responses{margin-top: 12px; padding: 14px;}
.compact-demo .preview-report-responses > header > div > small{color: rgb(89, 103, 127); font-size:11px;}
.compact-demo .preview-report-responses > header > b{flex: 0 0 auto; padding: 4px 7px; border: 1px solid rgb(191, 219, 254); border-radius: 999px; color: rgb(11, 79, 201); background: rgb(239, 246, 255); font-size:11px;}
.compact-demo .preview-report-response-table{max-width: 100%; margin-top: 10px; overflow-x: auto; border: 1px solid rgb(231, 237, 245); border-radius: 10px;}
.compact-demo .preview-report-response-table:focus-visible{box-shadow: rgba(18, 94, 229, 0.15) 0px 0px 0px 3px; outline: 0px;}
.compact-demo .preview-report-response-table table{width: 100%; min-width: 750px; border-collapse: collapse; color: rgb(52, 66, 90); font-size:11px;}
.compact-demo .preview-report-response-table th{padding: 8px; color: rgb(89, 103, 127); background: rgb(245, 248, 252); font-size:11px; font-weight: 850; letter-spacing: 0.03em; text-align: left; text-transform: uppercase;}
.compact-demo .preview-report-response-table td{padding: 8px; border-top: 1px solid rgb(231, 237, 245); vertical-align: middle;}
.compact-demo .preview-report-response-table td > strong{color: rgb(11, 79, 201); font-size:11px;}
.compact-demo .preview-report-response-table button{min-height: 25px; padding: 3px 7px; border: 1px solid rgb(159, 197, 255); border-radius: 7px; color: rgb(11, 79, 201); background: rgb(255, 255, 255); font-size:11px; font-weight: 820; cursor: pointer; white-space: nowrap;}
.compact-demo .preview-report-response-table button:hover{color: rgb(255, 255, 255); background: rgb(18, 94, 229);}
.compact-demo .preview-report-response-table button:focus-visible{box-shadow: rgba(18, 94, 229, 0.15) 0px 0px 0px 3px; outline: 0px;}
.compact-demo .product-demo .demo-disclaimer{margin: 17px 0px 0px;}























@media (max-width: 900px){.compact-demo .demo-app-layout{grid-template-columns: 1fr; min-height: 0px;}
.compact-demo .product-demo .demo-tabs{flex-direction: row; overflow-x: auto; padding: 10px; border-right: 0px; border-bottom: 1px solid rgb(219, 228, 240);}
.compact-demo .product-demo .demo-tabs::before{display: none;}
.compact-demo .product-demo .demo-tabs button{width: auto; flex: 0 0 auto;}
.compact-demo .product-demo .demo-canvas{min-height: 0px; padding: 22px;}
.compact-demo .product-demo .demo-canvas [role="tabpanel"]{min-height: 0px;}
.compact-demo .preview-dashboard{grid-template-columns: 1fr;}
.compact-demo .preview-assignment-layout{grid-template-columns: 1fr;}
.compact-demo .preview-result-detail-grid,.compact-demo .preview-qr-response-layout{grid-template-columns: 1fr;}
.compact-demo .preview-response-index > div{grid-template-columns: repeat(3, minmax(0px, 1fr));}
.compact-demo .preview-report-cover,.compact-demo .preview-report-analysis{grid-template-columns: 1fr;}
}
@media (max-width: 600px){.compact-demo .platform .product-demo{width: calc(100% - 24px);}
.compact-demo .demo-appbar{align-items: flex-start; flex-direction: column; gap: 3px;}
.compact-demo .product-demo .demo-tabs button{min-width: auto; padding: 0px 11px;}
.compact-demo .product-demo .demo-canvas{padding: 17px 12px;}
.compact-demo .preview-heading{align-items: flex-start; flex-direction: column; gap: 9px;}
.compact-demo .preview-heading h3{font-size: 21px;}
.compact-demo .preview-result-switcher{grid-template-columns: 1fr;}
.compact-demo .preview-result-context{grid-template-columns: 1fr;}
.compact-demo .preview-result-context > div:last-child{min-width: 0px; padding: 10px 0px 0px; border-top: 1px solid rgb(227, 234, 243); border-left: 0px;}
.compact-demo .preview-response-index > div{grid-template-columns: 1fr;}
.compact-demo .preview-response-summary{grid-template-columns: repeat(2, minmax(0px, 1fr));}
.compact-demo .preview-response-summary > div,.compact-demo .preview-response-summary > div:nth-child(3n){border-right: 1px solid rgb(231, 237, 245); border-bottom: 1px solid rgb(231, 237, 245);}
.compact-demo .preview-response-summary > div:nth-child(2n){border-right: 0px;}
.compact-demo .preview-response-summary > div:nth-last-child(-n+3){border-bottom: 1px solid rgb(231, 237, 245);}
.compact-demo .preview-response-summary > div:nth-last-child(-n+2){border-bottom: 0px;}
.compact-demo .preview-result-aggregates{grid-template-columns: 1fr;}
.compact-demo .preview-report-response-table{overflow: visible; border: 0px;}
.compact-demo .preview-report-response-table table{min-width: 0px; display: block;}
.compact-demo .preview-report-response-table thead{display: none;}
.compact-demo .preview-report-response-table tbody{display: grid; gap: 9px;}
.compact-demo .preview-report-response-table tr{display: block; overflow: hidden; border: 1px solid rgb(225, 232, 241); border-radius: 10px; background: rgb(255, 255, 255);}
.compact-demo .preview-report-response-table td{display: grid; grid-template-columns: 92px minmax(0px, 1fr); align-items: center; gap: 8px; padding: 7px 9px; border-top: 1px solid rgb(237, 241, 246);}
.compact-demo .preview-report-response-table td:first-child{border-top: 0px;}
.compact-demo .preview-report-response-table td::before{content: attr(data-label); color: rgb(89, 103, 127); font-size:11px; font-weight: 850; text-transform: uppercase;}
.compact-demo .preview-report-response-table button{justify-self: start;}
.compact-demo .preview-metric-grid{grid-template-columns: 1fr;}
.compact-demo .preview-metric-grid article{min-height: 76px;}
.compact-demo .preview-assignment-row{grid-template-columns: 34px minmax(0px, 1fr);}
.compact-demo .preview-assignment-row > .preview-status{grid-column: 2; justify-self: start;}
.compact-demo .preview-assignment-layout .demo-assignment{grid-template-columns: 1fr;}
.compact-demo .preview-real-qr img{width: 132px; height: 132px;}
.compact-demo .preview-report-score{grid-template-columns: 82px minmax(0px, 1fr);}
.compact-demo .preview-report-ring{width: 74px; height: 74px;}
.compact-demo .preview-report-trend > div{grid-template-columns: 1fr 1fr;}
.compact-demo .preview-report-trend > div > span{border-bottom: 1px solid rgb(229, 234, 242);}
.compact-demo .preview-report-trend > div > span:nth-child(2n){border-right: 0px;}
.compact-demo .preview-report-trend > div > span:nth-last-child(-n+2){border-bottom: 0px;}
.compact-demo .preview-report-ranking > div{grid-template-columns: 105px minmax(45px, 1fr) 24px;}

}






















































@media (max-width: 1120px){

}
@media (max-width: 900px){












}
@media (max-width: 600px){






}



















@media (max-width: 600px){


}