.suite-intro{max-width:820px}
.suite-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:30px}
.suite-group,.diagnostic-card,.test-surface,.device-nav{border:1px solid #e3e7ed;border-radius:16px;background:#fff}
.suite-group{padding:20px}
.suite-group h2{margin:0 0 13px;font:800 20px/1.25 "Manrope",sans-serif;letter-spacing:-.03em}
.suite-links{display:grid;gap:9px}
.suite-link{display:block;padding:13px;border:1px solid #e3e7ed;border-radius:11px;color:#0b0d12;text-decoration:none;transition:border-color .15s,background .15s}
.suite-link:hover,.suite-link:focus-visible{border-color:#2563eb;background:#f7f9fc;outline-color:#2563eb}
.suite-link strong{display:block;font:800 15px/1.35 "Manrope",sans-serif}
.suite-link span{display:block;margin-top:4px;color:#59616d;font-size:13px;line-height:1.5}
.suite-subnav{margin:20px 0 26px;padding:16px}
.suite-subnav h2{margin:0 0 12px;font:800 17px/1.3 "Manrope",sans-serif}
.device-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;border:0;background:none}
.device-nav-group{padding:13px;border:1px solid #e3e7ed;border-radius:12px;background:#fff}
.device-nav-group h3{margin:0 0 7px;color:#667085;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.device-nav-group a{display:block;padding:5px 0;color:#0b0d12;font-size:14px;font-weight:700;text-decoration:none}
.device-nav-group a:hover,.device-nav-group a[aria-current="page"]{color:#2563eb}
.tool-workspace{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(270px,.85fr);align-items:start;gap:18px}
.diagnostic-card{min-width:0;padding:22px}
.diagnostic-card h2{margin:0 0 5px;font:800 20px/1.3 "Manrope",sans-serif;letter-spacing:-.025em}
.diagnostic-lead{margin:0 0 17px;color:#59616d;font-size:14px;line-height:1.6}
.test-surface{padding:20px;border:2px dashed #cfd4dc;background:#f7f9fc}
.test-surface:focus-visible{outline:3px solid #2563eb;outline-offset:3px}
.test-surface.active{border-color:#2563eb;background:#f7f9ff}
.surface-title{margin:0 0 6px;font:800 18px/1.3 "Manrope",sans-serif}
.surface-copy{margin:0;color:#59616d;line-height:1.6}
.surface-buttons{display:flex;flex-wrap:wrap;gap:9px;margin-top:15px}
.surface-buttons .calc-button{flex:1 1 120px}
.test-controls{display:flex;flex-wrap:wrap;align-items:end;gap:10px;margin-top:16px}
.test-controls .field{flex:1 1 170px}
.test-controls .calc-button{min-height:44px}
.test-status{min-height:24px;margin:13px 0 0;color:#344054;font-size:14px;font-weight:700;line-height:1.55}
.limitation-note{margin-top:14px;padding:13px 15px;border-left:3px solid #2563eb;background:#f7f9fc;color:#344054;font-size:13px;line-height:1.6}
.limitation-note strong{color:#0b0d12}
.diagnostic-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:15px 0 0;background:#e3e7ed}
.diagnostic-stats>div{min-width:0;padding:13px;background:#fff}
.diagnostic-stats strong{display:block;overflow-wrap:anywhere;color:#0b0d12;font:800 20px/1.3 "Manrope",sans-serif}
.diagnostic-stats span{display:block;margin-top:3px;color:#667085;font-size:13px;line-height:1.45}
.event-list,.key-list{display:grid;gap:7px;margin:12px 0 0;padding:0;list-style:none}
.event-list li,.key-list li{padding:9px 11px;border:1px solid #e3e7ed;border-radius:9px;color:#344054;font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.event-list:empty::after,.key-list:empty::after{content:"No events yet.";color:#667085;font-size:13px}
.list-heading{margin:17px 0 0;font:800 15px/1.4 "Manrope",sans-serif}
.key-tokens{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.key-token{padding:7px 10px;border:1px solid #cfd4dc;border-radius:8px;background:#fff;color:#0b0d12;font-size:13px;font-weight:700}
.key-token[data-held="true"]{border-color:#2563eb;background:#eef3ff}
.key-token:empty::after{content:"No keys held";color:#667085}
.test-surface-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:14px}
.test-button{min-height:76px;padding:12px;border:1px solid #cfd4dc;border-radius:12px;background:#fff;color:#0b0d12;font:800 14px/1.4 "Manrope",sans-serif;cursor:pointer;touch-action:manipulation}
.test-button:hover,.test-button:focus-visible{border-color:#2563eb;outline-color:#2563eb}
.test-button:active{background:#eef3ff}
.history-scroll{max-height:260px;overflow:auto}
.mapping-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-top:14px}
.mapping-controls[hidden]{display:none}
.mapping-note{margin:9px 0 0;color:#59616d;font-size:13px;line-height:1.55}
.controller-select{max-width:100%;margin:0 0 14px}
.controller-select[hidden]{display:none}
.stick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.stick-panel{min-width:0;padding:13px;border:1px solid #e3e7ed;border-radius:12px}
.stick-panel h3{margin:0 0 8px;font:800 15px/1.4 "Manrope",sans-serif}
.stick-visual{position:relative;width:min(100%,190px);aspect-ratio:1;margin:0 auto 9px;border:1px solid #cfd4dc;border-radius:50%;background:linear-gradient(90deg,transparent calc(50% - .5px),#e3e7ed 50%,transparent calc(50% + .5px)),linear-gradient(transparent calc(50% - .5px),#e3e7ed 50%,transparent calc(50% + .5px)),#fff}
.stick-visual::before{position:absolute;inset:24%;border:1px dashed #cfd4dc;border-radius:50%;content:""}
.stick-dot{position:absolute;left:50%;top:50%;width:13px;height:13px;border:2px solid #fff;border-radius:50%;background:#2563eb;box-shadow:0 0 0 1px #2563eb;transform:translate(-50%,-50%)}
.stick-dot[hidden]{display:none}
.stick-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;color:#59616d;font-size:12px;text-align:center}
.stick-values strong{display:block;color:#0b0d12;font-size:14px}
.range-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;margin:13px 0}
.range-row input{width:100%;accent-color:#2563eb}
.range-value{min-width:58px;color:#0b0d12;font-weight:800;text-align:right}
.trigger-row{margin:14px 0}
.trigger-heading{display:flex;justify-content:space-between;gap:10px;margin-bottom:6px;font-size:14px;font-weight:800}
.trigger-track{height:14px;overflow:hidden;border:1px solid #cfd4dc;border-radius:99px;background:#f7f9fc}
.trigger-fill{width:0;height:100%;background:#2563eb;transition:width .08s linear}
.trigger-track[aria-hidden="true"]{display:block}
.trigger-small{margin-top:5px;color:#667085;font-size:13px}
.test-surface .limitation-note{background:#fff}
.faq-list details{border-bottom:1px solid #e3e7ed}
.faq-list summary{padding:16px 0;font-size:16px;font-weight:700;cursor:pointer}
.faq-list details p{margin:0;padding:0 0 16px;color:#59616d;line-height:1.7}
.suite-footer-link{margin-top:22px}
@media(max-width:850px){.tool-workspace{grid-template-columns:1fr}.suite-groups{grid-template-columns:1fr}}
@media(max-width:620px){.device-nav{grid-template-columns:1fr}.diagnostic-card{padding:17px}.test-surface{padding:15px}.stick-grid{grid-template-columns:1fr 1fr}.test-controls .calc-button{flex:1 1 auto}}
@media(max-width:380px){.diagnostic-stats,.stick-grid,.mapping-controls{grid-template-columns:1fr}.stick-visual{width:min(100%,170px)}}
@media(prefers-reduced-motion:reduce){.suite-link,.trigger-fill{transition:none}}