.dashboard-showcase{position:relative;isolation:isolate;min-width:0;width:100%;max-width:780px;margin:12px auto 0;padding:22px 0 0}
.db-view-pair{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 142px;gap:14px;align-items:start;z-index:2}
.db-color-block{position:absolute;inset:0 29px 60px 23px;background:#EAE1FA;border-radius:27px 70px 24px 24px;transform:rotate(-4deg);z-index:0}
.db-character-grid{position:absolute;top:-25px;right:5px;font:13px/1.2 var(--mono,"JetBrains Mono",monospace);color:#087F8C;white-space:pre;z-index:1;transform:rotate(7deg);margin:0;pointer-events:none}
.db-desktop{position:relative;min-width:0;background:#FFFFFFF7;border:1px solid #B8C8E3;border-radius:11px;box-shadow:5px 7px 0 #155EEF17;overflow:hidden}
.db-window-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #E0E6F0;padding:11px 13px;font-size:11px;line-height:1.2;background:#FAFCFF}
.db-window-bar>span:first-child{display:flex;align-items:center;gap:7px;font-weight:650;color:#17233A}.db-window-bar img{display:block;object-fit:contain;width:19px;height:21px}.db-window-dots{letter-spacing:2px;color:#64748B;font-size:10px}
.db-report-title{display:flex;flex-direction:column;gap:5px;padding:17px 14px 0}.db-report-title h2{font-size:20px;line-height:1.1;letter-spacing:-.025em;font-weight:650}.db-report-title>span{font-size:10px;color:#53617B}
.db-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:18px 14px 15px}.db-kpis>div{display:flex;flex-direction:column;gap:6px;border-bottom:2px solid #D9E3F7;padding-bottom:10px;min-width:0}.db-kpis strong{font-size:25px;line-height:1;font-weight:650;letter-spacing:-.045em;white-space:nowrap}.db-kpis small{font-size:12px;font-weight:500;letter-spacing:0}.db-kpis span{font-size:9px;line-height:1.3;color:#53617B}
.db-completion-chart{display:block;width:calc(100% - 20px);height:auto;margin:0 10px}.db-chart-label{font:13px var(--font,"Google Sans Flex",Arial,sans-serif);fill:#43536E}
.db-chart-question{display:flex;align-items:flex-start;gap:8px;background:#F0EAFC;border-radius:7px;margin:12px 13px 0;padding:10px}.db-chart-question>svg{width:18px;height:18px;flex-shrink:0;fill:none;stroke:#8155D9;stroke-width:1.8;stroke-linecap:round}.db-chart-question p{font-size:11px;line-height:1.45;margin:0;color:#4D3B6A}.db-chart-question strong{font-weight:600}
.db-grain{margin:12px 14px 15px!important;font-size:9px!important;line-height:1.45!important;color:#53617B}
.db-mobile{position:relative;min-width:0;background:white;border:2px solid #17233A;border-radius:22px;padding:12px 6px 10px;margin-top:58px;box-shadow:5px 7px 0 #155EEF19;z-index:3}
.db-mobile-speaker{width:34px;height:4px;border-radius:4px;background:#17233A;margin:0 auto 12px}.db-mobile-browser{display:flex;align-items:center;gap:3px;background:#F0F4FA;border-radius:5px;min-height:23px;padding:4px 5px;color:#53617B;font:7px var(--mono,"JetBrains Mono",monospace);white-space:nowrap}.db-mobile-browser svg{height:11px;width:11px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.1}
.db-mobile-body{padding:14px 4px 8px}.db-mobile-heading{display:flex;flex-direction:column;gap:5px}.db-mobile-heading>strong{font-size:12px;line-height:1.15;letter-spacing:-.02em;font-weight:650}.db-mobile-heading>span{font-size:9px;color:#64728A}.db-mobile-main{display:flex;flex-direction:column;gap:5px;margin-top:16px}.db-mobile-main>strong{font-size:32px;line-height:1;letter-spacing:-.05em;font-weight:650}.db-mobile-main small{font-size:13px;letter-spacing:0;font-weight:500}.db-mobile-main>span{font-size:10px;color:#53617B}
.db-mobile-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:14px;margin-top:14px;border-top:1px solid #DDE5F2}.db-mobile-pair>div{display:flex;flex-direction:column;gap:4px}.db-mobile-pair strong{font-size:18px;line-height:1;font-weight:650}.db-mobile-pair span{font-size:9px;color:#53617B}.db-mobile-chart{display:block;width:100%;height:auto;margin:15px 0 10px}.db-mobile-question{display:flex;gap:5px;padding:7px 5px;background:#F0EAFC;border-radius:5px;color:#6235A5}.db-mobile-question>span{font-size:17px;line-height:1}.db-mobile-question>p{font-size:9px;line-height:1.35;margin:0}.db-mobile-question strong{font-weight:600}.db-mobile-foot{font-size:9px!important;line-height:1.4!important;margin:13px 0 0!important;color:#53617B}.db-mobile-home{width:35px;height:3px;border-radius:3px;background:#17233A;margin:3px auto 0}
.dashboard-showcase>figcaption{position:relative;z-index:2;font-size:11px;line-height:1.5;color:#53617B;margin-top:20px;max-width:57ch}
@media(min-width:1500px){.db-view-pair{grid-template-columns:minmax(0,1fr) 156px}.db-mobile-main>strong{font-size:36px}.db-mobile-heading>strong{font-size:14px}.db-mobile-browser{font-size:8px}}
@media(max-width:1100px){.db-view-pair{grid-template-columns:minmax(0,1fr) 120px;gap:10px}.db-report-title{padding:15px 11px 0}.db-report-title h2{font-size:18px}.db-kpis{padding:16px 11px 12px;gap:5px}.db-kpis strong{font-size:22px}.db-kpis small{font-size:10px}.db-kpis span{font-size:8px}.db-mobile{padding:11px 5px 9px}.db-mobile-body{padding:12px 2px 7px}.db-mobile-browser{font-size:6px;padding-inline:3px;gap:2px}.db-mobile-main>strong{font-size:29px}.db-mobile-main small{font-size:11px}.db-mobile-heading>strong{font-size:11px}.db-mobile-pair{gap:5px}.db-chart-question{margin:9px 10px 0;padding:8px;gap:5px}.db-chart-question p{font-size:10px}.db-chart-question>svg{height:15px;width:15px}.db-grain{margin-inline:11px!important;font-size:8px!important}}
@media(max-width:800px){.dashboard-showcase{max-width:690px;margin-top:22px}.db-view-pair{grid-template-columns:minmax(0,1fr) 156px;gap:20px}.db-report-title h2{font-size:22px}.db-kpis strong{font-size:29px}.db-kpis span{font-size:11px}.db-kpis small{font-size:13px}.db-window-bar{font-size:12px}.db-chart-question p{font-size:12px}.db-grain{font-size:10px!important}.db-mobile-heading>strong{font-size:14px}.db-mobile-browser{font-size:8px}.db-mobile-main>strong{font-size:36px}.db-mobile-main small{font-size:14px}.db-mobile-main>span,.db-mobile-heading>span{font-size:11px}.db-mobile-pair span,.db-mobile-foot,.db-mobile-question>p{font-size:10px!important}.db-mobile-body{padding:16px 6px 10px}}
@media(max-width:520px){.dashboard-showcase{margin-top:16px;padding-top:15px}.db-view-pair{grid-template-columns:minmax(0,1fr);gap:22px}.db-desktop{border-radius:9px}.db-report-title{padding:17px 15px 0}.db-report-title h2{font-size:23px}.db-report-title>span{font-size:11px}.db-kpis{padding:20px 15px 15px;gap:11px}.db-kpis strong{font-size:28px}.db-kpis small{font-size:13px}.db-kpis span{font-size:10px}.db-completion-chart{width:calc(100% - 26px);margin-inline:13px}.db-chart-label{font-size:14px}.db-chart-question{margin:12px 13px 0;padding:11px;gap:8px}.db-chart-question p{font-size:12px}.db-grain{margin:12px 15px 16px!important;font-size:10px!important}.db-mobile{width:168px;justify-self:end;margin-top:0;margin-right:10px;padding:13px 7px 10px}.db-mobile-browser{font-size:8px}.db-mobile-heading>strong{font-size:15px}.db-mobile-main>strong{font-size:40px}.db-mobile-pair strong{font-size:22px}.db-mobile-chart{margin-top:19px}.db-mobile-body{padding:17px 7px 11px}.db-mobile-question{padding:9px 7px}.db-mobile-question>p{font-size:11px!important}.db-mobile-foot{font-size:11px!important}.db-color-block{inset:0 7px 70px 5px;transform:rotate(-2deg);border-radius:20px 55px 25px 25px}.db-character-grid{top:auto;bottom:140px;left:5px;right:auto;color:#087F8C;font-size:14px;transform:rotate(-6deg)}.dashboard-showcase>figcaption{font-size:12px;margin-top:22px}}
@media(max-width:360px){.db-kpis{gap:7px;padding-inline:12px}.db-kpis strong{font-size:25px}.db-kpis small{font-size:11px}.db-kpis span{font-size:9px}.db-chart-question p{font-size:11px}.db-character-grid{font-size:12px;top:auto;bottom:150px;left:0}.db-mobile{width:158px;margin-right:4px}}
@media(prefers-reduced-motion:reduce){.dashboard-showcase *{animation:none!important;transition:none!important}}