:root{--bg:#0d0d12;--panel:#15151d;--line:#2a2a38;--cy:#2ef2ff;--mg:#ff3fa4;--lm:#b6ff3c;--tx:#e8e6f0;--dim:#7d7a90}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(1200px 600px at 80% -10%,#24112a 0,transparent 60%),radial-gradient(900px 500px at -10% 30%,#0b2228 0,transparent 60%),var(--bg);color:var(--tx);font-family:'IBM Plex Mono',monospace;min-height:100vh}
header{text-align:center;padding:28px 12px 10px}
h1{font-family:Bungee,cursive;font-size:clamp(28px,6vw,64px);margin:0;letter-spacing:2px;background:linear-gradient(90deg,var(--cy),var(--mg),var(--lm));-webkit-background-clip:text;color:transparent;animation:rise .8s ease both}
.reel{margin-left:10px;font-size:.6em;-webkit-text-fill-color:var(--mg)}
#tagline{color:var(--dim);font-weight:300;margin:6px 0 10px;animation:rise .8s .15s ease both}
#hzBadge{display:inline-block;border:1px solid var(--line);padding:4px 12px;border-radius:99px;font-size:12px;color:var(--lm);animation:rise .8s .3s ease both}
#hzBadge.warn{color:#ffb020;border-color:#ffb020}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
main{max-width:1200px;margin:0 auto;padding:12px;display:grid;gap:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:0 0 30px #2ef2ff0d;animation:rise .7s .4s ease both}
.lbl{font-size:11px;letter-spacing:2px;color:var(--dim);margin-right:6px}
.source{display:grid;grid-template-columns:1fr 1.4fr;gap:14px}
#drop{border:2px dashed #444458;border-radius:12px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;text-align:center;transition:.2s}
#drop.over,#drop:hover{border-color:var(--cy);background:#2ef2ff0a}
#drop small{color:var(--dim)}
.reelIcon{width:44px;height:44px;border-radius:50%;border:4px solid var(--mg);background:radial-gradient(circle,var(--panel) 18%,transparent 19%),conic-gradient(var(--mg) 0 10%,transparent 10% 25%,var(--mg) 25% 35%,transparent 35% 50%,var(--mg) 50% 60%,transparent 60% 75%,var(--mg) 75% 85%,transparent 85%);animation:spin 4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#patternBtns{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
#srcInfo{font-size:12px;color:var(--lm)}
button{font-family:inherit;background:#1e1e29;color:var(--tx);border:1px solid var(--line);border-radius:8px;padding:7px 11px;cursor:pointer;font-size:13px;transition:.15s}
button:hover{border-color:var(--cy)}
button.on{background:var(--cy);color:#000;border-color:var(--cy);font-weight:700}
button.big{background:var(--mg);color:#fff;border-color:var(--mg);font-weight:700}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0}
.sep{flex:1}
.tog{font-size:12px;display:flex;align-items:center;gap:4px;color:var(--dim);cursor:pointer}
.tog input{accent-color:var(--cy)}
input[type=range]{width:100%;accent-color:var(--mg);margin:8px 0}
#panes{display:grid;gap:10px}
#panes.layout2{grid-template-columns:1fr 1fr}
#panes.layout4{grid-template-columns:1fr 1fr}
.pane{position:relative;background:#000;padding:22px 0;border-radius:10px;border:1px solid #333;overflow:hidden;
background-image:repeating-linear-gradient(90deg,#000 0 14px,#2b2b33 14px 28px);background-size:28px 12px;background-repeat:repeat-x;background-position:0 5px,0 calc(100% - 5px)}
.pane::before,.pane::after{content:"";position:absolute;left:0;right:0;height:12px;background:repeating-linear-gradient(90deg,transparent 0 8px,#d9d4c4 8px 18px,transparent 18px 28px);opacity:.25}
.pane::before{top:5px}.pane::after{bottom:5px}
.pane canvas{display:block;width:100%;aspect-ratio:16/9;background:#05050a}
.pane .scan{position:absolute;inset:22px 0;pointer-events:none;background:repeating-linear-gradient(0deg,#0000 0 2px,#00000055 2px 3px)}
body.noscan .scan{display:none}
.pane .chip{position:absolute;top:30px;right:10px;font-size:12px;font-weight:700;padding:3px 8px;border-radius:6px;color:#000}
.pane.sel{outline:2px solid var(--cy)}
#verdict{text-align:center;font-family:Bungee;font-size:clamp(16px,2.6vw,26px);margin-top:12px;color:var(--lm);min-height:1.4em}
.fpsHead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#fpsBig{font-family:Bungee;font-size:44px;color:var(--cy);line-height:1}
.unit{color:var(--dim);margin-right:10px}
.fpsHead input{flex:1;min-width:160px}
#fpsGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:6px;margin-top:8px}
.fp{position:relative;border-radius:99px;padding:7px 0;font-weight:700;color:#0b0b0f;border:2px solid transparent;font-size:13px}
.fp.on{border-color:#fff;box-shadow:0 0 14px currentColor;transform:scale(1.08)}
.fp .st{position:absolute;top:-7px;right:-3px;font-size:11px;color:#ffe14a;text-shadow:0 0 3px #000}
.hint{color:var(--dim);display:block;margin-top:8px}
footer{text-align:center;padding:26px;color:var(--dim);font-size:13px}
footer a{color:var(--mg)}
@media(max-width:720px){
.source{grid-template-columns:1fr}
#panes.layout2,#panes.layout4{grid-template-columns:1fr}
#fpsGrid{display:flex;overflow-x:auto;padding:8px 2px}
.fp{min-width:52px;flex:none}
}