*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;overflow:hidden;cursor:auto;-webkit-user-select:none;-moz-user-select:none;user-select:none}.test-area,body{background-color:#fff}.test-area{width:100vw;height:100vh;position:relative;transition:background-color .3s ease}.menu-panel{position:fixed;top:70px;right:10px;width:300px;max-height:80vh;background:rgba(0,0,0,.95);color:#fff;border-radius:10px;padding:20px;opacity:1!important;visibility:visible!important;transform:translateY(0)!important;transition:all .3s ease;z-index:999;overflow-y:auto;border:1px solid hsla(0,0%,100%,.2)}.menu-panel.active{opacity:1;visibility:visible;transform:translateY(0)}.menu-panel.hidden{opacity:0!important;visibility:hidden!important;transform:translateY(-20px)!important}.menu-section{margin-bottom:20px}.menu-section h3{font-size:14px;margin-bottom:10px;color:#ccc;text-transform:uppercase;letter-spacing:1px}.color-picker-container{display:flex;align-items:center;gap:10px}.color-picker{width:60px;height:40px;border:none;border-radius:5px;cursor:pointer}.test-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:10px;gap:10px}.test-button{background:hsla(0,0%,100%,.1);border:1px solid hsla(0,0%,100%,.2);color:#fff;padding:12px;border-radius:5px;cursor:pointer;transition:all .2s ease;font-size:12px;text-align:center}.test-button:hover{background:hsla(0,0%,100%,.2);transform:translateY(-2px)}.test-button.active{background:#007acc;border-color:#007acc}.fullscreen-btn{width:100%;background:#007acc;border:none;color:#fff;padding:15px;border-radius:5px;cursor:pointer;font-size:14px;font-weight:700;transition:background .2s ease}.fullscreen-btn:hover{background:#005fa3}.test-pattern{width:100%;height:100%;position:absolute;top:0;left:0}.gradient-pattern{background:linear-gradient(90deg,#000,#fff)}.checkerboard{background-image:repeating-conic-gradient(#000 0 25%,#fff 0 50%);background-size:2px 2px}.grid-pattern{background-image:linear-gradient(hsla(0,0%,100%,.3) 1px,transparent 0),linear-gradient(90deg,hsla(0,0%,100%,.3) 1px,transparent 0);background-size:50px 50px}.subpixel-pattern{background:repeating-linear-gradient(90deg,red,red 1px,#0f0 0,#0f0 2px,#00f 0,#00f 3px)}.circle-test{display:flex;align-items:center;justify-content:center;background:#000}.circle{width:300px;height:300px;border:2px solid #fff;border-radius:50%}.square-test{display:flex;align-items:center;justify-content:center;background:#000}.square{width:300px;height:300px;border:2px solid #fff}.contrast-pattern{background:linear-gradient(90deg,#000,#000 25%,#fff 0,#fff 50%,#000 0,#000 75%,#fff 0,#fff)}.backlight-test{background:#000;position:relative}.backlight-corners{position:absolute;width:50px;height:50px;background:#fff}.corner-tl{top:0;left:0}.corner-tr{top:0;right:0}.corner-bl{bottom:0;left:0}.corner-br{bottom:0;right:0}.ghosting-test{background:#000;display:flex;align-items:center;justify-content:center}.moving-box{width:100px;height:100px;background:#fff;animation:move 2s linear infinite}@keyframes move{0%{transform:translateX(-50vw)}to{transform:translateX(50vw)}}.banding-test{background:linear-gradient(90deg,#000 0,#111 12.5%,#222 25%,#333 37.5%,#444 50%,#555 62.5%,#666 75%,#777 87.5%,#888)}@media (max-width:768px){.menu-panel{width:250px;right:5px;top:60px}.test-grid{grid-template-columns:1fr}}body.cursor-hidden,body.cursor-hidden *{cursor:none!important}.instructions{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.8);color:#fff;padding:10px 20px;border-radius:20px;font-size:12px;opacity:0;transition:opacity .3s ease}.instructions.show{opacity:1}