*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;display:flex;justify-content:center;align-items:center;min-height:100vh;background:#fff;padding:20px}.container{max-width:700px;width:100%}h1{text-align:center;color:#333;margin-bottom:10px;font-size:28px}.subtitle{text-align:center;color:#666;margin-bottom:30px;font-size:14px}.probability-container{display:flex;justify-content:center;gap:8px;margin-bottom:30px}.bucket{display:flex;flex-direction:column;align-items:center;width:36px}.bucket-wrapper{width:100%;height:100px;background:#e5e7eb;border-radius:6px;position:relative;overflow:hidden}.bucket-fill{position:absolute;bottom:0;left:0;right:0;height:0%;background:linear-gradient(to top,#667eea,#764ba2);transition:height .15s ease-out;border-radius:0 0 6px 6px}.bucket.highest .bucket-fill{background:linear-gradient(to top,#10b981,#34d399)}.bucket-label{margin-top:6px;font-size:14px;font-weight:600;color:#666}.bucket.highest .bucket-label{color:#10b981}.canvas-section{display:flex;justify-content:center;align-items:center;gap:20px;margin-bottom:30px}.canvas-container,.input-viz-container{display:flex;flex-direction:column;align-items:center;gap:8px}.canvas-label{font-size:12px;color:#888;font-weight:500;text-transform:uppercase;letter-spacing:.5px}.arrow{font-size:24px;color:#ccc;margin-top:20px}#pixelCanvas{cursor:crosshair;background:#f5f5f5;border-radius:4px}#inputViz{background:#000;border-radius:4px;image-rendering:pixelated}.controls{display:flex;gap:15px;justify-content:center;flex-wrap:wrap}button{padding:12px 30px;font-size:16px;border:none;border-radius:8px;cursor:pointer;font-weight:600;transition:all .3s ease;box-shadow:0 4px 6px #0000001a}#clearBtn{background:#ef4444;color:#fff}#clearBtn:hover{background:#dc2626;transform:translateY(-2px);box-shadow:0 6px 8px #00000026}.info{margin-top:20px;padding:15px;background:#f3f4f6;border-radius:8px;text-align:center;color:#666;font-size:14px}