:root{--bg-primary:#0a0c0f;--bg-tertiary:#141a22;--bg-card:#111820;--bg-card-hover:#16202c;--border:#1e2d3d;--border-bright:#2a3f55;--accent:#5B9CF6;--green:#00ff88;--red:#ff4444;--orange:#ff7b00;--text-primary:#e8f4ff;--text-secondary:#7a9ab8;--text-dim:#3d5a73;--mono:'Inter',sans-serif;--sans:'Inter',sans-serif;--radius:0px;--radius-lg:0px;}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
body{background:var(--bg-primary);color:var(--text-primary);font-family:var(--sans);font-size:15px;min-height:100vh;overflow-x:hidden;line-height:1.6;}
body::before{content:'';position:fixed;inset:0;background-image:linear-gradient(rgba(91,156,246,0.015) 1px,transparent 1px),linear-gradient(90deg,rgba(91,156,246,0.015) 1px,transparent 1px);background-size:40px 40px;pointer-events:none;z-index:0;}
.container{position:relative;z-index:1;max-width:1100px;margin:0 auto;padding:0 20px;}
header{padding:20px 0;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);margin-bottom:28px;}
.site-name{font-family:var(--mono);font-size:26px;font-weight:700;color:var(--text-primary);}
.site-name a{color:inherit;text-decoration:none;}
.button-selector{display:flex;gap:8px;margin-bottom:20px;}
.btn-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-secondary);font-family:var(--mono);font-size:14px;font-weight:500;cursor:pointer;transition:all 0.15s;user-select:none;-webkit-user-select:none;}
@media(hover:hover){.btn-tab:hover{background:var(--bg-card-hover);color:var(--text-primary);}}
.btn-tab.active{color:var(--text-primary);}.btn-tab.active .dot{background:var(--accent);opacity:1;}
.btn-tab .dot{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:0.6;}
.btn-tab .fault-badge{font-size:11px;background:rgba(255,68,68,0.15);color:var(--red);border:1px solid rgba(255,68,68,0.3);padding:1px 6px;display:none;}
.btn-tab .fault-badge.visible{display:inline-block;}
.main-grid{display:grid;grid-template-columns:1fr 340px;gap:16px;align-items:start;}
@media(max-width:780px){.main-grid{grid-template-columns:1fr;}}
.click-zone-wrapper{display:flex;flex-direction:column;gap:16px;}
.click-zone{position:relative;height:260px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:crosshair;overflow:hidden;transition:box-shadow 0.1s;user-select:none;-webkit-user-select:none;touch-action:none;}
.click-zone:hover{background:var(--bg-card-hover);box-shadow:inset 0 0 60px rgba(91,156,246,0.04);}
.click-zone.fault-flash{animation:faultFlash 0.35s ease-out;}
.click-zone.normal-flash{animation:normalFlash 0.2s ease-out;}
@keyframes faultFlash{0%{box-shadow:inset 0 0 0 rgba(255,68,68,0);}30%{box-shadow:inset 0 0 50px rgba(255,68,68,0.22);}100%{box-shadow:inset 0 0 0 rgba(255,68,68,0);}}
@keyframes normalFlash{0%{box-shadow:inset 0 0 0 rgba(91,156,246,0);}40%{box-shadow:inset 0 0 40px rgba(91,156,246,0.15);}100%{box-shadow:inset 0 0 0 rgba(91,156,246,0);}}
.click-zone-icon{pointer-events:none;margin-bottom:16px;}
.click-zone-cta{font-size:22px;font-weight:600;color:var(--text-primary);letter-spacing:-0.01em;pointer-events:none;transition:color 0.1s;}
.click-zone-sub{font-family:var(--mono);font-size:13px;color:var(--text-secondary);margin-top:6px;pointer-events:none;}
.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:rippleAnim 0.5s linear;pointer-events:none;}
.ripple.normal{background:radial-gradient(circle,rgba(91,156,246,0.35) 0%,transparent 70%);}
.ripple.fault{background:radial-gradient(circle,rgba(255,68,68,0.45) 0%,transparent 70%);}
@keyframes rippleAnim{to{transform:scale(4);opacity:0;}}
.click-count-overlay{position:absolute;top:14px;right:14px;font-family:var(--mono);font-size:13px;color:var(--text-secondary);pointer-events:none;}
.click-count-overlay span{color:var(--accent);font-size:22px;font-weight:700;display:block;text-align:right;line-height:1;margin-bottom:2px;}
.last-gap-overlay{position:absolute;bottom:14px;right:14px;font-family:var(--mono);font-size:13px;color:var(--text-secondary);text-align:right;pointer-events:none;opacity:0;transition:opacity 0.3s;}
.last-gap-overlay.visible{opacity:1;}
.last-gap-overlay .gap-value{font-size:22px;font-weight:700;display:block;line-height:1;margin-bottom:2px;}
.last-gap-overlay .gap-value.normal{color:var(--accent);}
.last-gap-overlay .gap-value.fault{color:var(--red);}
.threshold-panel{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:8px 18px 16px;}
.threshold-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.threshold-label{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.5px;}
.threshold-value{font-family:var(--mono);font-size:22px;font-weight:700;color:var(--accent);}
.threshold-value small{font-size:13px;font-weight:400;color:var(--text-secondary);}
.slider-track{position:relative;height:6px;background:var(--border-bright);margin-bottom:8px;}
.slider-fill{position:absolute;left:0;top:0;height:100%;background:var(--accent);pointer-events:none;transition:width 0.05s;min-width:14px;}
input[type=range]{position:absolute;inset:-6px 0;width:100%;opacity:0;cursor:pointer;height:18px;}
.threshold-hint{font-family:var(--mono);font-size:13px;color:var(--text-secondary);margin-top:8px;min-height:18px;transition:color 0.2s;}
.slider-marks{position:relative;height:16px;margin-top:4px;}
.slider-marks span{position:absolute;font-family:var(--mono);font-size:11px;color:var(--text-secondary);transform:translateX(-50%);}
.slider-marks span:first-child{transform:none;}
.slider-marks span:last-child{transform:translateX(-100%);}
.sidebar{display:flex;flex-direction:column;gap:14px;}
.panel-header .panel-sub{letter-spacing:0;opacity:0.7;text-transform:none;font-weight:400;}
.stats-panel{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);}
.panel-header{padding:10px 14px;border-bottom:1px solid var(--border);font-family:var(--mono);font-size:12px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.5px;display:flex;align-items:baseline;gap:7px;border-radius:var(--radius) var(--radius) 0 0;}
.stat-row{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;border-bottom:1px solid var(--border);transition:background 0.1s;position:relative;}
.stat-row:last-child{border-bottom:none;border-radius:0 0 var(--radius) var(--radius);}
.stat-row:hover{background:var(--bg-card-hover);}
.stat-name{font-family:var(--mono);font-size:13px;color:var(--text-secondary);}
.stat-value{font-family:var(--mono);font-size:18px;font-weight:700;color:var(--text-primary);transition:color 0.2s;}
.stat-value.danger{color:var(--red);}
.stat-value.warning{color:var(--orange);}
.stat-value.good{color:var(--green);}
.stat-value.accent{color:var(--accent);}
.verdict-banner{border-radius:var(--radius);padding:16px 18px;display:none;animation:fadeIn 0.4s ease-out;}
.verdict-banner.visible{display:block;}
.verdict-banner.pass{background:rgba(0,255,136,0.07);border:1px solid rgba(0,255,136,0.25);}
.verdict-banner.fail{background:rgba(255,68,68,0.07);border:1px solid rgba(255,68,68,0.25);}
@keyframes fadeIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}
.verdict-title{font-family:var(--mono);font-size:15px;font-weight:700;margin-bottom:8px;display:flex;align-items:flex-start;gap:8px;}
.verdict-title svg{margin-top:4px;}
.verdict-banner.pass .verdict-title{color:var(--green);}
.verdict-banner.fail .verdict-title{color:var(--red);}
.verdict-body{font-size:14px;color:var(--text-secondary);line-height:1.65;}
.controls-row{display:flex;gap:10px;align-items:center;}
.btn-reset{flex:1;padding:10px 18px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-secondary);font-family:var(--mono);font-size:13px;font-weight:500;cursor:pointer;transition:all 0.15s;text-transform:uppercase;}
@media(hover:hover){.btn-reset:hover{background:var(--bg-card-hover);color:var(--text-primary);}}
.btn-reset:active{background:var(--bg-tertiary);color:var(--text-primary);}
.log-panel{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);}
.log-panel-header{padding:10px 14px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;}
.log-panel-header .panel-header{padding:0;border:none;}
.log-scroll{height:188px;overflow-y:auto;overflow-x:hidden;font-family:var(--mono);font-size:13px;scrollbar-width:thin;scrollbar-color:var(--border) transparent;}
.log-scroll::-webkit-scrollbar{width:4px;}
.log-scroll::-webkit-scrollbar-track{background:transparent;}
.log-scroll::-webkit-scrollbar-thumb{background:var(--border);}
.log-entry{display:grid;grid-template-columns:22px 1fr 80px 70px;gap:0 10px;padding:7px 14px;border-bottom:1px solid rgba(30,45,61,0.5);animation:logSlide 0.2s ease-out;align-items:center;}
@keyframes logSlide{from{opacity:0;background:rgba(91,156,246,0.06);}to{opacity:1;background:transparent;}}
.log-entry.fault-entry{background:rgba(255,68,68,0.05);}
.log-entry.fault-entry:hover{background:rgba(255,68,68,0.09);}
.log-entry:not(.fault-entry):hover{background:var(--bg-card-hover);}
.log-num{color:var(--text-dim);font-size:11px;text-align:right;}
.log-time{color:var(--text-secondary);font-size:12px;}
.log-gap{text-align:right;font-weight:700;font-size:13px;}
.log-entry:not(.fault-entry) .log-gap{color:var(--accent);}
.log-entry.fault-entry .log-gap{color:var(--red);}
.log-tag{font-size:11px;padding:2px 6px;text-transform:uppercase;text-align:center;}
.log-tag.ok{color:var(--text-dim);background:rgba(255,255,255,0.04);border:1px solid var(--border);}
.log-tag.fault{color:var(--red);background:rgba(255,68,68,0.1);border:1px solid rgba(255,68,68,0.3);}
.log-tag.first{color:var(--text-dim);background:transparent;border:none;}
.content-section{margin-top:48px;padding-top:40px;border-top:1px solid var(--border);}
.content-h1{font-size:22px;font-weight:700;color:var(--text-primary);margin-bottom:24px;line-height:1.3;letter-spacing:-0.01em;}
.content-body p{color:var(--text-secondary);line-height:1.8;margin-bottom:18px;}
.content-body p:last-child{margin-bottom:0;}
.content-h2{font-size:19px;font-weight:700;color:var(--text-primary);margin-top:36px;margin-bottom:12px;line-height:1.3;}
.content-h2::after,.faq-heading::after{content:'';display:block;width:32px;height:3px;background:var(--accent);margin-top:8px;}
.stat-ref{font-family:var(--mono);font-size:13px;color:var(--text-primary);background:var(--bg-tertiary);border:1px solid var(--border);padding:1px 6px;}
.faq-section{margin-top:40px;scroll-margin-top:24px;}
.faq-heading{font-size:19px;font-weight:700;color:var(--text-primary);margin-bottom:28px;letter-spacing:-0.01em;}
.faq-item{padding:20px 0;border-bottom:1px solid var(--border);}
.faq-item:first-of-type{padding-top:0;}
.faq-item:last-of-type{border-bottom:none;}
.faq-q{font-size:17px;font-weight:600;color:var(--text-primary);margin-bottom:8px;line-height:1.4;font-family:var(--sans);}
.faq-a{color:var(--text-secondary);line-height:1.75;}
footer{margin-top:40px;padding:20px 0;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;}
.footer-text{font-family:var(--mono);font-size:14px;color:var(--text-secondary);}
.footer-links{display:flex;gap:20px;}
.footer-links a{font-family:var(--mono);font-size:13px;color:var(--text-secondary);text-decoration:none;transition:color 0.15s;}
.footer-links a:hover{color:var(--accent);}
.footer-site{color:var(--text-secondary);text-decoration:none;transition:color 0.15s;}
.footer-site:hover{color:var(--accent);}
.progress-wrap{margin-top:4px;}
.progress-label{display:flex;justify-content:space-between;font-family:var(--mono);font-size:12px;color:var(--text-secondary);margin-bottom:6px;}
.progress-bar{height:4px;background:var(--border-bright);overflow:hidden;}
.progress-fill{height:100%;background:var(--accent);transition:width 0.3s ease,background 0.3s;width:0%;}
[data-tip]{cursor:help;}
[data-tip]::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:14px;width:60%;background:#1a2535;border:1px solid var(--border-bright);color:var(--text-primary);font-family:var(--mono);font-size:12px;padding:6px 12px;white-space:normal;opacity:0;pointer-events:none;transition:opacity 0.15s;z-index:10;text-transform:none;}
[data-tip]:hover::after{opacity:1;}
@media(max-width:600px){header{flex-direction:column;align-items:flex-start;gap:12px;}.site-name{font-size:22px;}.button-selector{flex-direction:column;}}
@media(max-width:415px){footer{flex-direction:column;align-items:center;text-align:center;}}
.legal-section{margin-top:32px;}
.legal-date{color:var(--text-secondary);margin-top:-16px;margin-bottom:32px;}
.content-body ul{padding-left:20px;margin-bottom:18px;}
.content-body li{color:var(--text-secondary);line-height:1.8;margin-bottom:4px;}