:root{--primary:#ff1414;--primary-transp:#ff14144d;--secondary:#14ffff;--secondary-transp:#14ffff4d;--black-transp:#0000004d}*{box-sizing:border-box}body{color:#fff;background:#050505;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}main{padding:4vh 4vw}h1{letter-spacing:1px;color:var(--secondary);margin-bottom:5vh;font-size:50px;font-weight:600}.content{align-items:flex-start;gap:2rem;display:flex}.config-wrap{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff08;border:1px solid #ffffff14;border-radius:16px;flex:1;min-width:260px;padding:20px}fieldset{border:1px solid #ffffff14;border-radius:12px;margin-bottom:14px;padding:14px}legend{color:var(--secondary);letter-spacing:.5px;padding:0 8px;font-size:12px}label{opacity:.7;margin-top:10px;font-size:12px;display:block}select,[type=number]{color:#fff;background:#0006;border:1px solid #ffffff1a;border-radius:8px;outline:none;width:100%;margin-top:4px;padding:8px 10px;transition:all .2s}[type=number]:focus{border-color:var(--secondary);box-shadow:0 0 0 2px var(--secondary-transp)}.hidden{display:none}.toggle{color:#ffffffb3;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:10px;font-size:13px;display:flex}.toggle input{display:none}.slider{background:#ffffff1a;border:2px solid #ffffff26;border-radius:999px;width:42px;height:22px;transition:all .25s;position:relative}.slider:before{content:"";background:var(--secondary);width:16px;height:16px;box-shadow:0 0 10px var(--secondary-transp);border-radius:50%;transition:all .25s;position:absolute;top:50%;left:3px;transform:translateY(-50%)}.toggle input:checked+.slider{border-color:var(--secondary);background:#14ffff26}.toggle input:checked+.slider:before{box-shadow:0 0 12px var(--primary-transp);transform:translate(18px,-50%)}button{background:linear-gradient(135deg, var(--primary), var(--secondary));color:#000;cursor:pointer;border:none;border-radius:10px;width:100%;margin-top:5px;padding:10px 14px;font-weight:600;transition:all .2s}button:hover{filter:brightness(1.1);transform:translateY(-1px)}button:active{transform:translateY(0)}.output-wrap{flex:2}.viewport-wrap{background:radial-gradient(circle,#14ffff0d,#000000e6);border:1px solid #ffffff14;border-radius:16px;width:100%;height:60vh;overflow:hidden;box-shadow:0 10px 40px #0009}.heatmap-container{gap:12px;margin-top:12px;display:flex}.heatmap-wrap{aspect-ratio:1;background:#0006;border:1px solid #ffffff14;border-radius:14px;flex:1;transition:all .2s;overflow:hidden}footer{background:#000;border-top:1px solid #ffffff14;align-items:center;gap:10px;padding:18px 24px;display:flex}p.footer{opacity:.7;flex:1;font-size:13px}.link{color:var(--secondary);text-decoration:none}.link:hover{text-shadow:0 0 10px var(--secondary-transp)}.loader{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:99999;background:#000000d9;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.loader-spinner{border:6px solid #ffffff1a;border-top:6px solid var(--secondary);border-right:6px solid var(--primary);width:60px;height:60px;box-shadow:0 0 30px var(--secondary-transp);border-radius:50%;animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=900px){.content{flex-direction:column}.config-wrap,.output-wrap{width:100%}.viewport-wrap{width:100%;height:50vh}}