.diag-app{color:var(--diag-ink,#172438);max-width:1050px;margin:auto;text-align:start}.diag-note,.diag-privacy{line-height:1.65;font-size:.94rem}.diag-note{opacity:.85}.diag-controls{display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin:22px 0}.diag-controls label{display:flex;flex-direction:column;gap:7px;font-size:.9rem;flex:1 1 180px;min-width:0}.diag-controls .diag-wide{flex-basis:100%}.diag-controls button,.diag-controls select,.diag-controls input[type=number]{font:inherit;color:inherit;border:1px solid #8292aa66;border-radius:9px;padding:10px 14px;background:var(--surface,#f0f4fa);min-height:44px;max-width:100%}.diag-controls button{cursor:pointer;flex:0 1 auto}.diag-controls button[data-action=start]{background:#185cc5;color:#fff;border-color:#185cc5}.diag-controls button:disabled{opacity:.45;cursor:default}.diag-controls input[type=range]{width:100%;accent-color:#185cc5;min-height:32px}.diag-controls :focus-visible{outline:3px solid #528cff;outline-offset:3px}.diag-status{min-height:2.8em;line-height:1.5}.diag-app canvas{display:block;width:100%;height:auto;aspect-ratio:18/5;background:#12233a;border-radius:12px;direction:ltr}.diag-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:12px;margin:20px 0}.diag-metrics>div{border:1px solid #8292aa55;border-radius:10px;padding:15px;min-width:0}.diag-metrics dt{font-size:.85rem;line-height:1.4;min-height:2.7em}.diag-metrics dd{margin:8px 0 0;font-size:1.35rem;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.diag-comparison{border-inline-start:4px solid #24a6a0;padding:12px 16px;background:#24a6a011;overflow-wrap:anywhere}.diag-comparison p{white-space:pre-line}.diag-privacy{margin-top:20px}.diag-app [hidden]{display:none!important}@media(max-width:480px){.diag-controls button{flex:1 1 130px}.diag-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.diag-metrics dd{font-size:1.15rem}.diag-app canvas{aspect-ratio:2.4/1}}
.diag-app{--diag-ink:#172438;--diag-muted:#526174;--diag-surface:#f0f4fa;--diag-line:#8292aa;--diag-primary:#185cc5;--diag-primary-ink:#fff;color:var(--diag-ink)}
[data-theme=dark] .diag-app,[data-kbt-msn-theme=dark] .diag-app,.dark-theme .diag-app{--diag-ink:#f1f5f9;--diag-muted:#bac7d9;--diag-surface:#243349;--diag-line:#93a5be;--diag-primary:#2869ce;--diag-primary-ink:#fff;color-scheme:dark}
.diag-app .diag-controls label,.diag-app .diag-metrics dt,.diag-app .diag-metrics dd,.diag-app .diag-status,.diag-app .diag-comparison,.diag-app .diag-note,.diag-app .diag-privacy{color:var(--diag-ink)}
.diag-app .diag-note{opacity:1}
.diag-app .diag-controls button,.diag-app .diag-controls select,.diag-app .diag-controls input[type=number]{background:var(--diag-surface);color:var(--diag-ink);border-color:var(--diag-line)}
.diag-app .diag-controls button[data-action=start]{background:var(--diag-primary);color:var(--diag-primary-ink)}
.diag-app .diag-controls button:disabled{opacity:1;color:var(--diag-muted);background:var(--diag-surface);border-color:var(--diag-line);cursor:not-allowed}
.diag-app .diag-controls select option{background:var(--diag-surface);color:var(--diag-ink)}
/* Keep the template's existing second display placement outside the controls.
   Natural creative height remains unrestricted; no additional ad unit is added. */
@media(min-width:769px){.localized-modern-tool-page .home-after-tool-banner{min-height:300px}}