:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}#root{width:100%}*{margin:0;padding:0;box-sizing:border-box}@font-face{font-family:TitleFont;src:url(/Title-Bold.ttf)}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);color:#333}.app{min-height:100vh;display:flex;flex-direction:column}.navbar{position:sticky;top:0;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 10px rgba(0,0,0,0 1);z-index:100;font-family:TitleFont}.navbar h1{font-size:xx-large;color:#324dc5}.nav-links{display:flex;gap:1rem}.nav-links button{background:transparent;border:none;color:#000;font-size:1rem;cursor:pointer;padding:0 5rem 1rem;border-radius:4px;transition:background .3s;font-family:TitleFont;font-size:x-large}.nav-links button:hover{background:#667eea1a}.section{min-height:100vh;padding:4rem 2rem;display:flex;align-items:center;justify-content:center;gap:2rem}.explain-section{background:linear-gradient(180deg,#2dd9d1,#ef88a9);flex-direction:column}.encode-section{background:linear-gradient(0deg,#ffb855,#ef88a9)}.decode-section{background:linear-gradient(180deg,#ffb855,#ff1515)}.content-left,.content-right{flex:1;max-width:500px}.content-left{display:flex;flex-direction:column;gap:1 5rem}.content-right{display:flex;align-items:center;justify-content:center}.content-center{max-width:800px;background:#fff;padding:2rem;border-radius:12px;box-shadow:0 4px 20px #0000001a}.content-center h2{margin-bottom:1rem;color:#324dc5;font-family:TitleFont}.content-center h3{margin-top:1.7rem;margin-bottom:.5rem;color:#000}.content-center p{line-height:1.8;color:#282828}h2{font-size:2rem;color:#000}p{color:#000;line-height:1.6}.upload-zone{position:relative;margin:3px}.file-label{display:block;background:#fff;border:2px dashed #b9c5fd;padding:10px;border-radius:7px;text-align:center;cursor:pointer;transition:background .3s,border-color .3s}.file-label:hover{background:#f5f7ff;border-color:#764ba2}input[type=file]{display:none}.strategy-selector{display:flex;flex-direction:column;gap:.5rem}.strategy-selector label{font-weight:600;color:#000}.strategy-selector select{padding:.75rem;border-radius:7px;border:1px solid #ccc;font-size:1rem;background:#fff;cursor:pointer;color:#000;text-align:center;margin-bottom:1px}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:15px;font-size:1rem;border-radius:7px;cursor:pointer;transition:transform .2s,box-shadow .2s;font-weight:600;margin:3px}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.btn-download{background:#1f9d3d;color:#fff;border:none;padding:.75rem 2rem;font-size:1rem;border-radius:7px;cursor:pointer;margin-top:1rem;transition:transform .2s,box-shadow .2s;font-weight:600}.btn-download:hover{transform:translateY(-2px);box-shadow:0 4px 12px #28a74566}.result{background:#fff;padding:1.5rem;border-radius:7px;box-shadow:0 4px 20px #0000001a;display:flex;flex-direction:column;align-items:center;gap:1rem}.result h3{font-size:1.25rem;color:#333}.result img{max-width:100%;max-height:400px;border-radius:7px;box-shadow:0 2px 8px #0000001a}.footer{background:#000c;color:#fff;text-align:center;padding:1 5rem;margin-top:auto}@media(max-width:768px){.section{flex-direction:column;padding:2rem 1rem}.content-left,.content-right{max-width:100%}.navbar{flex-direction:column;gap:1rem}.nav-links{flex-wrap:wrap}}.preview-zone{margin-bottom:30px;padding:10px;text-align:center;min-height:200px;display:flex;align-items:center;justify-content:center}.preview-image{max-width:100%;max-height:300px;object-fit:contain;border-radius:4px}