.diagnostic{margin-top:45px;background:#0a2432;border:1px solid #274450;border-radius:16px;color:#fff;overflow:hidden;scroll-margin-top:110px}.diag-header{padding:35px 36px 27px;display:flex;justify-content:space-between;align-items:start;gap:25px}.diag-header .eyebrow{color:#7adbc9;font-size:9px;margin-bottom:14px}.diag-header h3{font-size:27px;letter-spacing:-.8px;margin:0 0 12px}.diag-header p:not(.eyebrow){font-size:13px;color:#adc5ce;margin:0;line-height:1.7}#diag-play{white-space:nowrap;border:1px solid #517582;border-radius:6px;background:#163643;color:#dbefed;padding:11px 14px;font-size:11px;cursor:pointer}.diag-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:30px;padding:0 36px 30px}.diag-stages{list-style:none;margin:0;padding:20px 0;display:flex;flex-direction:column;justify-content:center;gap:13px}.diag-stages button{width:100%;display:flex;align-items:center;gap:16px;text-align:left;padding:19px 17px;border:1px solid #34525e;color:#c5d9df;background:#102d3b;border-radius:8px;cursor:pointer;transition:border-color .3s,background .3s}.diag-stages button>span{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid #47636d;border-radius:50%;font-size:11px;flex-shrink:0}.diag-stages button>div{font-size:14px;font-weight:600}.diag-stages small{display:block;color:#8facb9;font-size:10px;font-weight:400;margin-top:6px}.diag-stages b{margin-left:auto;font-weight:400;color:#7eaaaf}.diag-stages button[aria-current=step]{border-color:#09d5b0;background:#12443f;color:#fff;box-shadow:inset 3px 0 #09d5b0}.diag-stages button[aria-current=step]>span{background:#09d5b0;border-color:#09d5b0;color:#082b30}.diag-stages button[aria-current=step] small{color:#b8e7de}.diag-detail{border:1px solid #2d5360;border-radius:10px;background:radial-gradient(ellipse at 50% 25%,#154652,#0c2a39 70%);padding:23px 28px 0;overflow:hidden}.diag-detail-top{display:flex;justify-content:space-between;gap:15px;font-size:8px;letter-spacing:1.1px;color:#90b6c0}.diag-detail-top>span:first-child{color:#40d5b8}.diag-visual{height:155px;position:relative;margin:9px 0 5px;display:flex;justify-content:center;align-items:center}.diag-paper{position:relative;background:#123e4d;border:1px solid #477884;border-radius:6px;width:180px;height:125px;padding:15px 18px;box-shadow:10px 12px 0 #061d2a55;overflow:hidden;transform:rotate(-4deg);transition:transform .6s}.paper-tag{font-size:6px;color:#72c3c3;letter-spacing:1px}.paper-lines{display:flex;flex-direction:column;gap:7px;margin-top:12px}.paper-lines i{display:block;height:4px;background:#4e7b86;border-radius:2px;width:82%}.paper-lines i:nth-child(2){width:62%}.paper-lines i:nth-child(3){width:73%}.paper-blocks{display:flex;gap:9px;margin-top:14px}.paper-blocks i{width:23px;height:20px;border:1px solid #62c4b2;border-radius:3px}.scan-beam{position:absolute;left:0;right:0;height:2px;top:20%;background:#23e8c4;box-shadow:0 0 16px 5px #09d5b030;animation:diag-scan 3.5s ease-in-out infinite}.diag-symbol{position:absolute;left:calc(50% + 58px);top:88px;border:1px solid #58dbc3;border-radius:8px;width:49px;height:49px;background:#0b6f62;color:#cbfff3;display:grid;place-items:center;font-size:21px;font-weight:700;box-shadow:0 8px 24px #001a2655}.paper-bars{display:none;gap:10px;align-items:end;height:48px;margin-top:12px}.paper-bars i{background:#c7aa69;border-radius:3px 3px 0 0;width:22px;height:30%}.paper-bars i:nth-child(2){height:65%}.paper-bars i:nth-child(3){height:95%}.paper-check{display:none;position:absolute;right:19px;bottom:12px;font-size:37px;color:#47e7ba}.diagnostic[data-stage="1"] .paper-blocks i:nth-child(2){background:#0fc5a5}.diagnostic[data-stage="1"] .diag-paper{transform:rotate(0)}.diagnostic[data-stage="2"] .paper-bars{display:flex}.diagnostic[data-stage="2"] .paper-blocks,.diagnostic[data-stage="2"] .paper-lines{display:none}.diagnostic[data-stage="2"] .scan-beam{background:#e0c68a;box-shadow:0 0 16px #e0c68a50}.diagnostic[data-stage="3"] .paper-check{display:block}.diagnostic[data-stage="3"] .paper-blocks{visibility:hidden}.diagnostic[data-stage="3"] .diag-paper{transform:rotate(3deg)}.diag-detail h4{font-family:Manrope,Arial,sans-serif;font-size:21px;line-height:1.4;letter-spacing:-.5px;margin:12px 0;min-height:59px}.diag-detail>p{font-size:13px;line-height:1.8;color:#b8cdd5;min-height:94px;margin:0 0 18px}.diag-output{background:#ffffff05;border-left:2px solid #0ac4a3;padding:13px 16px;margin-bottom:25px;min-height:86px}.diag-output>span{font-size:8px;letter-spacing:1.5px;color:#5ad5c0}.diag-output p{font-size:12px;line-height:1.7;color:#d6e6e9;margin:7px 0 0}.diag-progress{height:3px;background:#23434e;margin:0 -28px}.diag-progress span{display:block;height:100%;background:#0cd7b0;width:25%;transition:width .5s}.diagnostic[data-stage="1"] .diag-progress span{width:50%}.diagnostic[data-stage="2"] .diag-progress span{width:75%}.diagnostic[data-stage="3"] .diag-progress span{width:100%}.diag-paused .scan-beam{animation-play-state:paused}.diag-footer{border-top:1px solid #294650;padding:20px 36px;display:flex;justify-content:space-between;align-items:center;gap:30px}.diag-footer p{font-size:10px;color:#9cb5c0;line-height:1.8;max-width:570px;margin:0}.diag-footer a{font-size:12px;color:#40dec0;font-weight:600;white-space:nowrap}@keyframes diag-scan{50%{top:85%}}
@media(max-width:900px){.diag-layout{gap:20px;padding:0 25px 25px;grid-template-columns:.8fr 1fr}.diag-header{padding:28px 25px}.diag-header h3{font-size:24px}.diag-stages button{gap:10px;padding:17px 11px}.diag-stages button>div{font-size:12px}.diag-detail{padding:20px 20px 0}.diag-progress{margin:0 -20px}.diag-footer{padding:20px 25px}.diag-detail>p{min-height:140px}.diag-output{min-height:106px}}
@media(max-width:650px){.diag-layout{grid-template-columns:1fr;padding:0 18px 20px;gap:10px}.diag-header{padding:25px 20px 0;flex-direction:column;gap:17px}.diag-header h3{font-size:23px}.diag-header p:not(.eyebrow){font-size:12px}.diag-stages{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:18px 0 8px}.diag-stages button{padding:12px 9px;gap:8px;min-height:75px;height:100%}.diag-stages button>span{width:24px;height:24px;font-size:9px}.diag-stages button>div{font-size:11px;line-height:1.5}.diag-stages small{font-size:8px;margin-top:4px}.diag-stages b{display:none}.diag-detail h4{font-size:20px;min-height:84px}.diag-detail>p{font-size:12px;min-height:130px}.diag-output{min-height:100px}.diag-footer{padding:20px;flex-direction:column;align-items:start;gap:16px}.diag-detail-top{font-size:7px;letter-spacing:.6px}.diag-visual{height:145px}}
@media(prefers-reduced-motion:reduce){.scan-beam{animation:none!important;display:none}.diag-paper,.diag-progress span,.diag-stages button{transition:none}}