*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#0c0c0c00,#1a1a1a00);color:#fff;display:flex;justify-content:center;align-items:center;min-height:100vh;padding:20px;overflow:hidden}.container{text-align:center}h1{margin-bottom:20px;color:#4a9eff;text-shadow:0 0 5px rgba(74,158,255,.3)}.controls{margin-top:10px;display:flex;align-items:center;justify-content:left;gap:10px;flex-wrap:wrap}.reset-button-container{position:absolute;top:448px;left:20px;z-index:15;pointer-events:auto}#resetBtn,#saveBtn{color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:16px;transition:all .3s ease}#saveBtn{background:linear-gradient(135deg,#4a9eff,#357abd);box-shadow:0 4px 15px #4a9eff4d}#resetBtn:hover,#saveBtn:hover{transform:translateY(-2px)}#saveBtn:hover{box-shadow:0 6px 20px #4a9eff66}#gridSize,#brushSize{width:120px}#sizeDisplay,#brushDisplay{font-weight:700;color:#4a9eff;min-width:50px}.grid-container{display:inline-block;border:1px solid #4a9eff69;border-radius:15px;padding:15px;background:linear-gradient(135deg,#2d2d2d00,#3a3a3a00);box-shadow:0 0 5px #4a9eff1a,inset 0 0 5px #0000001a}.grid{display:grid;gap:.5px;background-color:#1a1a1a42;padding:8px;border-radius:8px;filter:contrast(1.1) brightness(1.05)}.grid-cell{border:1px solid #39393953;cursor:crosshair;-webkit-user-select:none;user-select:none;position:relative;border-radius:1px;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.grid-cell:before{content:"";position:absolute;inset:0;background:inherit;border-radius:inherit;opacity:.7;z-index:-1}.grid-cell.hover{background-color:#4a9eff!important;box-shadow:0 0 12px #4a9eff99,0 0 20px #4a9eff4d;border-color:#6bb6ff;transform:scale(1.45);z-index:2}.grid-cell.hover-neighbor{background-color:#2a2a2aaa!important;border-color:#5a95dd82;transform:scale(1.26);z-index:1}.grid-cell.visited{background-color:#2e5a99;box-shadow:0 0 8px #2e5a9966,0 0 15px #2e5a9933;transform:scale(1.28)}.grid-cell.visited-fade{transition:all 2s ease-out}.grid-cell.painted{background:linear-gradient(135deg,#27ae60,#2ecc71)!important;border-color:#48c774}.grid-cell.painted-light{background:linear-gradient(135deg,#52c882,#6dd49a)!important;border-color:#7ee0a6}.grid-cell.painted-lighter{background:linear-gradient(135deg,#7dd4a3,#9ee0b8)!important;border-color:#a8e6c2}.grid-cell.painted:hover{background:linear-gradient(135deg,#2ecc71,#58d68d)!important;transform:scale(1.02)}body{overflow:hidden;background:#000;font-family:Arial,sans-serif}#info{position:absolute;top:10px;left:10px;color:#fff;z-index:100;background:#000000b3;padding:10px;border-radius:5px;font-size:12px}#controls{position:absolute;top:10px;right:10px;color:#fff;z-index:100;background:#000000b3;padding:10px;border-radius:5px}button{background:#333;color:#fff;border:none;padding:5px;margin:2px;border-radius:3px;cursor:pointer}button:hover{background:#555}input[type=range]{width:100px}.overlay-2d{position:absolute;top:0;left:0;z-index:10;background:#1e1e1e00;border-bottom-right-radius:18px;box-shadow:0 6px 24px #00000040;padding:8px 12px 12px 8px;margin:0;min-width:0;min-height:0;pointer-events:auto}body>canvas{position:fixed!important;top:0;left:0;width:100vw!important;height:100vh!important;z-index:1!important}.overlay-2d *{pointer-events:auto}.prediction-overlay{position:absolute;top:0;right:0;z-index:10;background:#1e1e1e00;border-bottom-left-radius:18px;box-shadow:0 6px 24px #00000040;padding:12px 8px 12px 12px;margin:0;min-width:280px;max-width:320px;pointer-events:auto}.prediction-container{text-align:center;border:1px solid #4a9eff69;border-radius:15px;padding:18px;background:linear-gradient(135deg,#2d2d2d29,#3a3a3a2c);box-shadow:0 0 5px #4a9eff1a,inset 0 0 5px #0000001a}.prediction-chart{display:flex;flex-direction:column;gap:8px;padding:10px;background:linear-gradient(135deg,#1a1a1aa0,#2a2a2aaf);border-radius:10px;border:1px solid #404040}.prediction-bar-container{display:flex;align-items:center;gap:8px;position:relative;margin:6px}.prediction-label{min-width:5px;font-size:12px;font-weight:700;color:#ccc;text-align:right}.prediction-bar-track{flex:1;height:18px;background:linear-gradient(135deg,#2a2a2a,#3a3a3a);border-radius:9px;border:1px solid #404040;position:relative;overflow:hidden;box-shadow:inset 0 2px 4px #0000004d}.prediction-bar{height:100%;background:linear-gradient(135deg,#4a9eff,#357abd);border-radius:8px;transition:width .5s cubic-bezier(.4,0,.2,1);position:relative;box-shadow:0 0 10px #4a9eff66,inset 0 1px 2px #fff3}.prediction-bar:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#ffffff4d,#ffffff1a,#ffffff4d);border-radius:inherit;opacity:0;transition:opacity .3s ease}.prediction-bar-container:hover .prediction-bar:after{opacity:1}.prediction-bar.highest{background:linear-gradient(135deg,#27ae60,#2ecc71);box-shadow:0 0 15px #27ae6080,inset 0 1px 2px #fff3;animation:pulse-green 2s ease-in-out infinite}.prediction-percentage{min-width:auto;font-size:9px;text-align:center;position:absolute;right:5px;top:50%;transform:translateY(-50%);z-index:10;background:#00000080;padding:1px 3px;border-radius:11px;white-space:nowrap;transition:right .5s cubic-bezier(.4,0,.2,1);display:none}.prediction-info{display:flex;flex-direction:column;gap:8px;padding:10px;background:linear-gradient(135deg,#1a1a1a,#2a2a2a);border-radius:10px;border:1px solid #404040}.predicted-class{font-size:14px;font-weight:700;color:#27ae60;text-shadow:0 0 8px rgba(39,174,96,.4)}.confidence{font-size:12px;color:#4a9eff;text-shadow:0 0 6px rgba(74,158,255,.3)}@keyframes pulse-green{0%,to{box-shadow:0 0 15px #27ae6080,inset 0 1px 2px #fff3}50%{box-shadow:0 0 25px #27ae60cc,inset 0 1px 2px #fff3}}.prediction-overlay *{pointer-events:auto}.annotation{background:#3a47ff1a;color:#fff;padding:8px 12px;border-radius:4px;font-size:10px;pointer-events:none;border:1px solid #444;white-space:nowrap}.annotation:after{content:"";position:absolute;bottom:-8px;left:50%;transform:translate(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid rgba(58,71,255,.1)}.instructions-overlay{position:absolute;bottom:0%;left:50%;transform:translate(-50%,-50%);z-index:20;background:#1e1e1e6b;border-radius:18px;box-shadow:0 8px 32px #00000059;padding:20px;min-width:320px;pointer-events:auto;opacity:1;transition:opacity 10s ease-out,transform 10s ease-out;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid #4a9eff69}.instructions-overlay.fade-out{opacity:0;transform:translate(-50%,-50%) translateY(50px);pointer-events:none}.instructions-container{text-align:left;color:#fff}.instructions-title{color:#4a9eff;font-size:22px;font-weight:700;margin-bottom:18px;text-shadow:0 0 5px rgba(74,158,255,.4)}.instructions-content{display:flex;flex-direction:column;gap:8px;font-size:14px;line-height:1.4}.instructions-content p{margin:0;padding:4px 0}.instructions-content strong{color:#4a9eff;text-shadow:0 0 2px rgba(74,158,255,.3)}.mobile-instructions-overlay{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:25;background:#1e1e1ee6;border-radius:15px;box-shadow:0 8px 32px #0006;padding:20px;min-width:280px;max-width:90vw;pointer-events:auto;opacity:1;transition:opacity 1s ease-out,transform 1s ease-out;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid #4a9eff69;display:none}.mobile-instructions-overlay.fade-out{opacity:0;transform:translate(-50%,-50%) translateY(30px);pointer-events:none}.mobile-instructions-content{text-align:center;color:#fff}.mobile-instructions-title{color:#4a9eff;font-size:18px;font-weight:700;margin-bottom:15px;text-shadow:0 0 5px rgba(74,158,255,.4)}.mobile-gesture-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px;font-size:14px;line-height:1.4}.mobile-gesture-list li{margin:0;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.1)}.mobile-gesture-list li:last-child{border-bottom:none}.mobile-gesture-list strong{color:#4a9eff;text-shadow:0 0 2px rgba(74,158,255,.3)}.info-button{position:fixed;bottom:40px;right:20px;width:50px;height:50px;background:linear-gradient(135deg,#4a9eff27,#3579bd25);border:1px solid rgba(74,158,255,.3);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1000;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-user-select:none;user-select:none}.info-button:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 0 5px #4a9eff80;background:linear-gradient(135deg,#5ba7ff,#4086c7)}.info-button span{color:#fff;font-size:24px;font-weight:700;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;text-shadow:0 2px 4px rgba(0,0,0,.3)}.info-modal{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000b3;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);z-index:2000;display:none;align-items:flex-end;justify-content:flex-end;padding:20px;opacity:0;transition:opacity .3s ease}.info-modal.show{display:flex;opacity:1}.info-modal-content{background:linear-gradient(135deg,#2d2d2d7d,#3a3a3a7e);border:1px solid #4a9eff69;border-radius:10px;box-shadow:0 0 5px #4a9eff33,inset 0 0 5px #0000001a;max-width:700px;max-height:80vh;overflow-y:auto;transform:translateY(50px);transition:transform .3s ease;color:#fff}.info-modal.show .info-modal-content{transform:translateY(0)}.info-modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 25px 15px;border-bottom:1px solid #404040}.info-modal-header h3{color:#4a9eff;margin:0;font-size:18px;font-weight:700;text-shadow:0 0 10px rgba(74,158,255,.3)}.close-modal-btn{background:none!important;border:none;font-size:28px;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;color:#ccc}.close-modal-btn:hover{color:#ff4757;background:none!important}.info-modal-body{padding:20px 25px 25px;line-height:1.5;font-size:14px}.info-modal-body p{color:#fff;font-size:14px}.info-modal-body h4{color:#4a9eff;margin:20px 0 10px;font-size:14px;text-shadow:0 0 8px rgba(74,158,255,.3)}.info-modal-body h4:first-child{margin-top:10px}.info-modal-body ul{padding-left:20px}.info-modal-body li{margin-bottom:8px;color:#fff;font-size:14px}.info-modal-body strong{color:#4a9eff;text-shadow:0 0 6px rgba(74,158,255,.2)}.info-note{background:linear-gradient(135deg,#1a3a5c86,#2a4a6c93);border-left:4px solid #4a9eff;padding:12px 10px;border-radius:8px;margin-top:20px;font-size:14px;color:#fff}.info-modal-content::-webkit-scrollbar{width:6px}.info-modal-content::-webkit-scrollbar-track{background:#ffffff1a;border-radius:3px}.info-modal-content::-webkit-scrollbar-thumb{background:#4a9eff80;border-radius:3px}.info-modal-content::-webkit-scrollbar-thumb:hover{background:#4a9effb3}@supports (-webkit-appearance: none){.grid-cell{transition:background-color .1s ease,transform .1s ease!important}.grid-cell.hover{transition:background-color .05s ease,transform .05s ease!important}.grid-cell.hover-neighbor{transition:background-color .08s ease,transform .08s ease!important}}@supports (-webkit-appearance: none){.grid.painting .grid-cell{transition:none!important;will-change:auto}.grid.painting .grid-cell:hover{box-shadow:none!important}.grid.painting .grid-cell.hover{transform:scale(1.2)!important}.grid.painting .grid-cell.hover-neighbor{transform:scale(1.1)!important}}@supports (-webkit-appearance: none){.grid-cell.hover{box-shadow:0 0 8px #4a9eff66!important}.grid-cell.hover-neighbor{box-shadow:none!important}.grid-cell.painted{box-shadow:0 0 6px #27ae604d!important}.grid-cell.painted-light{box-shadow:0 0 4px #52c88233!important}.grid-cell.painted-lighter{box-shadow:none!important}}@supports (-webkit-appearance: none){.overlay-2d,.prediction-overlay{-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.instructions-overlay{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:#1e1e1ecc!important}.info-button{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:#4a9eff30!important}}@supports (-webkit-appearance: none){@keyframes pulse-green{0%,to{box-shadow:0 0 10px #27ae604d}50%{box-shadow:0 0 15px #27ae6080}}.prediction-bar{transition:width .3s ease!important}}@media (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 1){.grid-cell:before{display:none}.grid-cell.hover{transform:scale(1.3)!important;box-shadow:0 0 4px #4a9eff66!important}.grid-cell.hover-neighbor{transform:scale(1.15)!important;box-shadow:none!important}}@supports not (backdrop-filter: blur(1px)){.grid-container,.prediction-container{background:#2d2d2dcc!important;box-shadow:none!important}.grid-cell{border-radius:0!important}}@supports (-webkit-appearance: none){.grid{filter:none!important}.container{-webkit-transform:translateZ(0);transform:translateZ(0)}}@supports (-webkit-touch-callout: none){.grid-cell{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.grid{-webkit-overflow-scrolling:touch}}.grid-cell.interacting{will-change:transform;contain:layout style paint}.grid.interacting .grid-cell:not(.painted):not(.hover){opacity:.8;transition:opacity .1s ease}.mnist-images-container{position:fixed;bottom:0;left:0;right:0;z-index:1000;display:flex;justify-content:center;align-items:flex-end;height:60px;pointer-events:none}.mnist-sample-image{width:15px;height:15px;overflow:hidden;background:#1e1e1e99;transition:transform .3s ease,border-color .3s ease;-webkit-user-select:none;user-select:none;pointer-events:auto;margin:0;flex-shrink:0;opacity:.6}.mnist-sample-image:hover{transform:translateY(-5px) scale(2.1);border-color:#4a9eff99;opacity:1}.mnist-sample-image img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(1.1) contrast(1.2)}@supports (-webkit-appearance: none){.mnist-sample-image{background:#1e1e1ecc!important}}@media screen and (max-width: 1024px){.overlay-2d{position:fixed;top:10px;left:10px;padding:8px;border-radius:12px}.grid-container{padding:8px;border-radius:8px}.grid{width:100%!important;height:auto!important;aspect-ratio:1;max-width:100%}.grid-cell{border-radius:1px}.controls{justify-content:center;margin-top:8px}.reset-button-container{position:fixed;top:65px;right:11px;left:auto}#resetBtn{font-size:20px}.prediction-overlay{position:fixed;inset:auto auto 10px 50%;transform:translate(-50%);width:calc(100vw - 20px);max-width:500px;min-width:auto;padding:10px;border-radius:15px;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}.prediction-container{padding:12px;background:transparent;border:none;box-shadow:none}.prediction-chart{display:flex;flex-direction:row;gap:3px;padding:8px;overflow-x:auto;scrollbar-width:thin;background:transparent;border:none}.prediction-bar-container{flex-direction:column;gap:2px;margin:0;min-width:35px;align-items:center;position:relative}.prediction-label{min-width:auto;font-size:11px;text-align:center;order:3}.prediction-bar-track{width:20px;height:auto;min-height:60px;max-height:120px;writing-mode:vertical-lr;order:2;display:flex;flex-direction:column;justify-content:flex-end;background:transparent;border:none;box-shadow:none}.prediction-bar{width:100%;height:0%;transition:height .5s cubic-bezier(.4,0,.2,1);background:linear-gradient(0deg,#4a9eff,#357abd);align-self:flex-end;border-radius:8px 8px 2px 2px}.prediction-bar.highest{background:linear-gradient(0deg,#27ae60,#2ecc71);animation:pulse-green 2s ease-in-out infinite}.prediction-percentage{min-width:auto;font-size:9px;text-align:center;order:1;position:absolute;left:50%;right:auto;top:auto;transform:translate(-50%);z-index:10;background:#00000080;padding:1px 3px;border-radius:11px;white-space:nowrap;transition:top .5s cubic-bezier(.4,0,.2,1)}.mnist-images-container,.instructions-overlay{display:none}.mobile-instructions-overlay{display:block}.info-button{bottom:auto;top:15px;right:11px;width:40px;height:40px}.info-button span{font-size:20px}.info-modal{padding:10px;align-items:center;justify-content:center}.info-modal-content{max-width:calc(100vw - 20px);max-height:80vh}.info-modal-header{padding:15px 20px 10px}.info-modal-header h3{font-size:16px}.info-modal-body{padding:15px 20px 20px;font-size:13px}.grid-cell{transition:background-color .1s ease,transform .1s ease!important}.grid-cell.hover{transform:scale(1.2)!important;box-shadow:0 0 6px #4a9eff66!important}.grid-cell.hover-neighbor{transform:scale(1.1)!important;box-shadow:none!important}}@media screen and (max-width: 480px){.overlay-2d{width:65vw;max-width:65vw}.prediction-overlay{width:calc(100vw - 10px);left:5px;transform:none}.prediction-chart{gap:0px}.prediction-bar-container{min-width:30px}.prediction-bar-track{min-height:100px;max-height:120px;width:18px}.prediction-percentage{font-size:8px;padding:1px 2px;transition:top .5s cubic-bezier(.4,0,.2,1)}.info-button{top:10px;right:10px}.reset-button-container{top:60px;right:10px}}.support-btn{position:fixed;bottom:100px;right:20px;width:50px;height:50px;background:linear-gradient(135deg,#4a9eff27,#3579bd25);border:1px solid rgba(74,158,255,.3);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1000;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font-size:20px;padding:0;transform:none}.support-btn:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 0 5px #4a9eff80;background:linear-gradient(135deg,#5ba7ff,#4086c7)}.feedback-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#0003;z-index:1999;opacity:0;pointer-events:none;transition:opacity .4s ease}.feedback-overlay.show{opacity:1;pointer-events:auto}.feedback-panel{position:fixed;top:50%;right:20px;width:100%;max-width:350px;height:auto;max-height:90vh;background:linear-gradient(135deg,#28282835,#32323259);border:1px solid rgba(74,158,255,.3);border-radius:12px;box-shadow:-5px 0 25px #0006;z-index:2000;transform:translate(120%) translateY(-50%);transition:transform .4s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow:hidden}.feedback-panel.show{transform:translate(0) translateY(-50%)}.feedback-panel-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #404040}.feedback-panel-header h3{color:#4a9eff;margin:0;font-size:18px;font-weight:700;text-shadow:0 0 10px rgba(74,158,255,.3)}textarea.feedback-input{resize:none}.close-panel-btn{background:none!important;border:none;font-size:28px;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;color:#ccc}.close-panel-btn:hover{color:#ff4757;background:none!important}.feedback-panel-body{padding:20px;flex-grow:1;overflow-y:auto}.feedback-input{width:100%;background:#0006;border:1px solid #404040;color:#fff;padding:10px 12px;border-radius:6px;margin-bottom:15px;font-family:inherit;font-size:14px;transition:all .3s ease;box-sizing:border-box}.feedback-input:focus{outline:none;border-color:#4a9eff;box-shadow:0 0 5px #4a9eff4d;background:#0009}.feedback-input::placeholder{color:#888}.feedback-submit-btn{width:100%;background:linear-gradient(135deg,#4a9eff30,#3579bd2e);color:#fff;border:none;padding:8px;border-radius:6px;font-size:16px;font-weight:700;cursor:pointer;transition:all .3s ease;border:1px solid #404040}.feedback-submit-btn:hover{transform:translateY(-2px)}.feedback-submit-btn:disabled{background:#555;box-shadow:none;cursor:not-allowed;transform:none}