@import"https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Crimson+Text:ital,wght@0,400;0,600;1,400&family=Uncial+Antiqua&display=swap";:root{font-family:Crimson Text,Times New Roman,serif;line-height:1.6;font-weight:400;color-scheme:dark;color:#e8dcc0;background:radial-gradient(circle at 20% 80%,rgba(120,60,200,.1) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(80,40,160,.1) 0%,transparent 50%),radial-gradient(circle at 40% 40%,rgba(60,30,120,.05) 0%,transparent 50%),linear-gradient(135deg,#0a0a1a,#1a1a3a,#2a1a4a,#1a1a3a,#0a0a1a);min-height:100vh;position:relative;overflow-x:hidden;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:root:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml,<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g fill="%23ffffff" fill-opacity="0.02"><circle cx="7" cy="7" r="1"/><circle cx="37" cy="7" r="1"/><circle cx="7" cy="37" r="1"/><circle cx="37" cy="37" r="1"/><circle cx="22" cy="22" r="1"/></g></g></svg>'),radial-gradient(circle at 50% 50%,rgba(255,255,255,.01) 0%,transparent 70%);pointer-events:none;z-index:-1;animation:twinkle 20s ease-in-out infinite}@keyframes twinkle{0%,to{opacity:.3}50%{opacity:.7}}@keyframes float{0%,to{transform:translateY(0) rotate(0)}33%{transform:translateY(-10px) rotate(1deg)}66%{transform:translateY(5px) rotate(-1deg)}}@keyframes glow{0%,to{box-shadow:0 0 20px #d4af3733,inset 0 0 20px #d4af371a}50%{box-shadow:0 0 30px #d4af3766,inset 0 0 30px #d4af3733}}@keyframes shimmer{0%{background-position:-200px 0}to{background-position:200px 0}}a{font-weight:500;color:#d4af37;text-decoration:inherit;transition:all .3s ease}a:hover{color:gold;text-shadow:0 0 8px rgba(255,215,0,.4)}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;background-attachment:fixed}h1{font-family:Uncial Antiqua,Cinzel,serif;font-size:3.2em;font-weight:400;line-height:1.1;color:#d4af37;text-shadow:2px 2px 4px rgba(0,0,0,.8),0 0 20px rgba(212,175,55,.4),0 0 40px rgba(212,175,55,.2);margin-bottom:.5em;position:relative;animation:float 6s ease-in-out infinite}h1:before{content:"";position:absolute;inset:-10px;background:linear-gradient(45deg,transparent,rgba(212,175,55,.1),transparent);border-radius:15px;z-index:-1;animation:shimmer 3s ease-in-out infinite}.magical-particles{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:-1}.magical-particles:before,.magical-particles:after{content:"✨";position:absolute;font-size:12px;color:#d4af37cc;text-shadow:0 0 8px rgba(212,175,55,.6);animation:float-particle 15s linear infinite}.magical-particles:before{top:20%;left:10%;animation-delay:0s;animation-duration:12s}.magical-particles:after{top:60%;right:15%;animation-delay:8s;animation-duration:18s;content:"⭐";color:#9370dbb3;text-shadow:0 0 8px rgba(147,112,219,.5)}.particle-2:before,.particle-2:after{content:"💫";position:absolute;font-size:10px;color:#ffd700b3;text-shadow:0 0 6px rgba(255,215,0,.5);animation:float-particle 20s linear infinite}.particle-2:before{top:80%;left:70%;animation-delay:3s;animation-duration:16s}.particle-2:after{top:30%;right:30%;animation-delay:11s;animation-duration:14s;content:"✨";color:#d4af3799}.particle-3:before,.particle-3:after{content:"🌟";position:absolute;font-size:8px;color:#783cc899;text-shadow:0 0 4px rgba(120,60,200,.4);animation:float-particle 18s linear infinite}.particle-3:before{top:40%;left:80%;animation-delay:6s;animation-duration:22s}.particle-3:after{top:70%;left:20%;animation-delay:15s;animation-duration:13s;content:"⭐"}.particle-4:before,.particle-4:after{content:"✨";position:absolute;font-size:9px;color:#9370db80;text-shadow:0 0 5px rgba(147,112,219,.3);animation:float-particle 25s linear infinite}.particle-4:before{top:10%;left:50%;animation-delay:9s;animation-duration:19s}.particle-4:after{top:90%;right:10%;animation-delay:4s;animation-duration:17s;content:"💫";color:#ffd70066}.particle-5:before,.particle-5:after{content:"⭐";position:absolute;font-size:7px;color:#d4af3766;text-shadow:0 0 3px rgba(212,175,55,.3);animation:float-particle 30s linear infinite}.particle-5:before{top:25%;left:30%;animation-delay:12s;animation-duration:21s}.particle-5:after{top:75%;right:40%;animation-delay:7s;animation-duration:24s;content:"🌟";color:#783cc84d}@keyframes float-particle{0%{transform:translateY(100vh) translate(0) rotate(0);opacity:0}10%{opacity:1}90%{opacity:1}to{transform:translateY(-100vh) translate(100px) rotate(360deg);opacity:0}}#app{max-width:1280px;margin:0 auto;padding:2rem;text-align:center;background:linear-gradient(145deg,#0f0f23f2,#1e1432e6),radial-gradient(circle at center,rgba(120,60,200,.05),transparent);border-radius:25px;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);box-shadow:0 0 40px #0000004d,inset 0 1px #ffffff1a;position:relative}#camera-container{position:relative;display:inline-block;margin:1.5rem 0;padding:1rem;background:#0000004d;border-radius:20px;box-shadow:0 4px 20px #0000004d;transition:all .3s ease}#camera-container:hover{box-shadow:0 6px 25px #0006;transform:translateY(-1px)}#canvasElement,#outputCanvas{border-radius:12px;margin:.5rem;max-width:100%;height:auto;box-shadow:0 4px 15px #0006;transition:all .3s ease}#outputCanvas{border:1px solid rgba(212,175,55,.3);box-shadow:0 4px 15px #0006,0 0 10px #d4af3733}#status{font-family:Cinzel,serif;font-size:1.1em;font-weight:500;margin:1.5rem 0;padding:1rem;background:#140a2899;border-radius:12px;color:#e8dcc0;text-shadow:1px 1px 2px rgba(0,0,0,.8)}#results{font-family:Cinzel,serif;font-weight:500;margin-top:1.5rem;padding:1rem;background:#140a2866;border-radius:12px;min-height:2rem;color:#d4af37;text-shadow:1px 1px 2px rgba(0,0,0,.8)}#debug-section{margin-top:2rem;padding:1.5rem;background:#140a2899;border-radius:15px;box-shadow:0 4px 20px #0000004d}#debug-section h3,#debug-section h4{font-family:Cinzel,serif;margin-top:0;color:#9370db;text-shadow:1px 1px 3px rgba(0,0,0,.8);font-weight:600}#debugCanvas,#ocrCanvas{border:1px solid rgba(147,112,219,.4);border-radius:8px;max-width:300px;height:auto;box-shadow:0 2px 10px #0006}#debug-info,#ocr-results{margin-top:.8rem;font-family:Crimson Text,monospace;font-size:.95em;background:#0006;color:#e8dcc0;padding:1rem;border-radius:8px;text-shadow:1px 1px 2px rgba(0,0,0,.8)}#ocr-controls{margin-top:1rem;padding:1.2rem;background:#28143c99;border-radius:12px;border:1px solid rgba(212,175,55,.3)}#ocr-controls h5{font-family:Cinzel,serif;color:#d4af37;margin-top:0;margin-bottom:1rem;text-shadow:1px 1px 2px rgba(0,0,0,.8)}.slider-group{margin-bottom:1rem}.slider-group label{display:block;font-family:Crimson Text,serif;color:#e8dcc0;margin-bottom:.5rem;font-size:.9em;text-shadow:1px 1px 2px rgba(0,0,0,.8)}.slider-group input[type=range]{width:100%;height:6px;background:linear-gradient(to right,#3c1e78cc,#d4af37cc);border-radius:3px;outline:none;-webkit-appearance:none}.slider-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:radial-gradient(circle,#d4af37,#b8941f);border-radius:50%;border:2px solid rgba(212,175,55,.8);cursor:pointer;box-shadow:0 0 8px #d4af3766}.slider-group input[type=range]::-moz-range-thumb{width:16px;height:16px;background:radial-gradient(circle,#d4af37,#b8941f);border-radius:50%;border:2px solid rgba(212,175,55,.8);cursor:pointer;box-shadow:0 0 8px #d4af3766}#resetDefaults{margin-top:1rem;font-size:.9em;padding:.6em 1em}#ocr-section{margin-top:1.5rem;padding:1.2rem;background:#1e0a3280;border-radius:12px}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.vanilla:hover{filter:drop-shadow(0 0 2em #f7df1eaa)}.card{padding:2em}.read-the-docs{color:#888}button{font-family:Cinzel,serif;font-weight:500;border-radius:12px;border:2px solid rgba(212,175,55,.6);padding:.8em 1.5em;font-size:1em;background:linear-gradient(135deg,#281450cc,#461e7899);color:#e8dcc0;cursor:pointer;transition:all .3s ease;text-shadow:1px 1px 2px rgba(0,0,0,.8);box-shadow:0 4px 15px #0000004d,inset 0 1px #ffffff1a}button:hover{border-color:#d4af37;background:linear-gradient(135deg,#461e78e6,#642896b3);transform:translateY(-2px);box-shadow:0 6px 20px #0006,0 0 15px #d4af374d,inset 0 1px #fff3}button:focus,button:focus-visible{outline:none;border-color:gold;box-shadow:0 0 0 3px #d4af374d,0 6px 20px #0006}button:active{transform:translateY(0);box-shadow:0 2px 10px #0006,inset 0 2px 4px #0000004d}@media (max-width: 768px){:root{background-attachment:scroll}body{padding:.5rem}#app{max-width:100%;margin:0;padding:1rem;border-radius:15px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}h1{font-size:2.2em;margin-bottom:.3em;animation:none}h1:before{animation:none}#camera-container{margin:1rem 0;padding:.8rem;border-radius:15px}#camera-container:hover{transform:none}#canvasElement,#outputCanvas{max-width:calc(100vw - 4rem);height:auto;border-width:2px;border-radius:8px;margin:.3rem}#status{font-size:1em;padding:.8rem;margin:1rem 0}#results{font-size:.9em;padding:.8rem;margin-top:1rem}#debug-section{padding:1rem;margin-top:1.5rem;border-radius:12px}#debug-section h3,#debug-section h4{font-size:1.1em;margin-bottom:.8rem}#debugCanvas,#ocrCanvas{max-width:calc(100vw - 6rem);border-width:2px;animation:none}#debug-info,#ocr-results{font-size:.85em;padding:.8rem;line-height:1.4}#ocr-section{padding:1rem;margin-top:1rem}button{padding:.7em 1.2em;font-size:.9em;border-radius:8px}.magical-particles,.magical-particles:before,.magical-particles:after{display:none}#app:before{animation:none}#app{animation:none}#outputCanvas:after{animation:none}}@media (max-width: 480px){#app{padding:.8rem}h1{font-size:1.8em;line-height:1.2}h1+p{font-size:1em!important}#camera-container{padding:.6rem;margin:.8rem 0}#canvasElement,#outputCanvas{max-width:calc(100vw - 3rem);margin:.2rem}#debug-section h3,#debug-section h4{font-size:1em}#debugCanvas,#ocrCanvas{max-width:calc(100vw - 4rem)}#debug-info,#ocr-results{font-size:.8em;padding:.6rem}}@media (hover: none) and (pointer: coarse){#camera-container:hover,button:hover,a:hover{transform:none;border-color:inherit;color:inherit}button{min-height:44px;padding:.8em 1.4em}*{animation-duration:.1s!important}}@media (max-width: 768px) and (orientation: landscape){#app{padding:.8rem}h1{font-size:1.8em;margin-bottom:.2em}#camera-container{margin:.8rem 0}#debug-section{margin-top:1rem}}