.character-card::before,.faq-card::before,.feature-highlight::before,.format-option::before{top:0;left:-100%;width:100%;height:100%;content:'';position:absolute}.character-card,.character-comparison,.faq-card,.feature-highlight,.format-option,.step-number{overflow:hidden;position:relative}.character-card,.character-comparison,.custom-checkbox,.encoding-recommendation,.step-number{position:relative}@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(1deg)}}.floating-element{animation:3s ease-in-out infinite float}@keyframes pulse-step{0%,100%{box-shadow:0 0 0 0 rgba(6,182,212,.7)}50%{box-shadow:0 0 0 10px rgba(6,182,212,0)}}.step-indicator{animation:2s infinite pulse-step}.encoding-card{transition:.3s;cursor:pointer}.encoding-card:hover{transform:scale(1.02);background:rgba(255,255,255,.1)}.step-line{background:linear-gradient(90deg,transparent 0,#06b6d4 50%,transparent 100%);animation:2s ease-in-out infinite shimmer}@keyframes shimmer{0%,100%{opacity:.3}50%{opacity:1}}.feature-card,.solution-card{transition:.3s cubic-bezier(.4, 0, .2, 1)}.character-card:hover,.feature-card:hover{transform:translateY(-4px) scale(1.02)}@keyframes step-glow{0%,100%{box-shadow:0 0 0 0 rgba(6,182,212,.7)}50%{box-shadow:0 0 0 8px rgba(6,182,212,0)}}.step-number{animation:3s ease-in-out infinite step-glow}.copy-item:hover{background:linear-gradient(135deg,rgba(6,182,212,.1),rgba(59,130,246,.1))}@keyframes rotate-icon{0%{transform:rotate(0)}100%{transform:rotate(6deg)}}.file-icon:hover{animation:.3s ease-in-out rotate-icon}.format-option:hover{background:linear-gradient(135deg,rgba(6,182,212,.1),rgba(59,130,246,.05));border-left-width:6px}.output-control:hover{background:rgba(255,255,255,.08);transform:translateX(4px)}.faq-card::before,.feature-highlight::before{background:linear-gradient(90deg,transparent,rgba(6,182,212,.1),transparent);transition:left .5s}.character-card:hover::before,.faq-card:hover::before,.feature-highlight:hover::before,.format-option:hover::before{left:100%}.camera-overlay,.custom-checkbox:checked::after{top:50%;left:50%;transform:translate(-50%,-50%)}@media (max-width:640px){.grid-cols-1.md\:grid-cols-5{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}.grid-cols-1.md\:grid-cols-5>:last-child{grid-column:span 2}.grid-cols-1.lg\:grid-cols-2{gap:1rem}.p-8{padding:1.5rem}.mb-12{margin-bottom:2rem}.grid-cols-1.md\:grid-cols-2,.grid-cols-1.md\:grid-cols-3{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-1.md\:grid-cols-3{gap:.75rem}.flex.items-start.gap-3{flex-direction:column;align-items:center;text-align:center;gap:.75rem}.w-8.h-8{margin:0 auto}.text-lg{font-size:1rem}.p-6,.text-center.p-3{padding:1rem}.font-tech{font-size:.75rem}.inline-flex.bg-white\/5{flex-wrap:wrap;gap:.25rem;justify-content:center}.manual-step-nav-btn{padding:.5rem 1rem;font-size:.875rem}.btn-primary,.btn-secondary{width:100%;text-align:center}.break-all{word-break:break-all;font-size:.75rem}}.btn-primary,.btn-secondary{padding:.5rem 1.5rem;font-weight:500;cursor:pointer}@keyframes pulse-file{0%,100%{opacity:1}50%{opacity:.5}}.file-processing{animation:1.5s ease-in-out infinite pulse-file}.format-option::before{background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .5s ease-in-out}.custom-checkbox{appearance:none;width:20px;height:20px;border:2px solid rgba(255,255,255,.3);border-radius:4px;background:rgba(255,255,255,.05);cursor:pointer;transition:.2s}.custom-checkbox:checked{background:linear-gradient(135deg,#06b6d4,#3b82f6);border-color:#06b6d4}.custom-checkbox:checked::after{content:'✓';position:absolute;color:#fff;font-size:12px;font-weight:700}.progress-ring{animation:2s linear infinite spin}@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}.character-card:focus,.feature-card:focus,.glass-hover:focus,.solution-card:focus{outline:#06b6d4 solid 2px;outline-offset:2px}.manual-step-nav-btn{color:#9ca3af;transition:.3s}.btn-primary,.manual-step-nav-btn.active{background:linear-gradient(135deg,#06b6d4,#3b82f6);color:#fff}.manual-step-content{opacity:1;transition:opacity .3s}.manual-step-content.hidden{display:none}@keyframes position-highlight{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(6,182,212,.7)}50%{transform:scale(1.05);box-shadow:0 0 0 8px rgba(6,182,212,0)}}.position-card:hover{animation:1s ease-in-out position-highlight}.character-card{transition:.3s cubic-bezier(.4, 0, .2, 1)}.btn-primary,.btn-secondary,.glass-hover,details{transition:.3s}.character-card::before{background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .5s}@keyframes binary-flash{0%,100%{background-color:rgba(255,255,255,.05)}50%{background-color:rgba(6,182,212,.2)}}.binary-result{animation:2s ease-in-out infinite binary-flash}.step-number::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:conic-gradient(transparent,rgba(255,255,255,.3),transparent);animation:4s linear infinite rotate}@keyframes rotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes check-bounce{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}.verification-check{animation:1s ease-in-out infinite check-bounce}.ascii-row:hover{background:linear-gradient(90deg,rgba(6,182,212,.1),rgba(59,130,246,.1));transform:translateX(4px)}.btn-primary{border-radius:.5rem;border:none}.btn-primary:hover{background:linear-gradient(135deg,#0891b2,#2563eb);transform:translateY(-1px)}.btn-primary:disabled,.btn-secondary:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-secondary{background:rgba(255,255,255,.1);color:#d1d5db;border-radius:.5rem;border:1px solid rgba(255,255,255,.2)}.btn-secondary:hover{background:rgba(255,255,255,.2);border-color:rgba(6,182,212,.5);transform:translateY(-1px)}.glass-hover:hover,details[open]{background:rgba(255,255,255,.08)}@media print{.bg-gradient-to-br,.bg-gradient-to-r{background:#f5f5f5!important}svg{fill:black!important;stroke:black!important}.btn-primary,.btn-secondary,.manual-step-nav-btn{display:none}.manual-step-content.hidden{display:block!important}.glass,.glass-hover{break-inside:avoid;background:#fff;color:#000;border:1px solid #ccc}.glow-text{color:#000!important;-webkit-text-fill-color:black!important}}.glass,.glass-hover{background:rgba(255,255,255,.05);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)}.glass-hover:hover{border-color:rgba(6,182,212,.3);transform:translateY(-2px)}.glow-text{background:linear-gradient(135deg,#06b6d4,#3b82f6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.font-tech{font-family:'JetBrains Mono','Fira Code',monospace}details summary{list-style:none;cursor:pointer}details summary::-webkit-details-marker{display:none}details summary:hover{color:#06b6d4}.problem-icon{animation:2s ease-in-out infinite pulse-warning}@keyframes pulse-warning{0%,100%{opacity:1}50%{opacity:.7}}.solution-card:hover{transform:translateX(4px);border-color:rgba(6,182,212,.4)}.character-comparison{border-radius:8px}.character-comparison::after{content:'';position:absolute;top:0;right:0;bottom:0;width:4px;background:linear-gradient(180deg,#06b6d4,#3b82f6)}.encoding-recommendation::before{content:'💡';position:absolute;top:-8px;right:-8px;font-size:1.5rem;filter:drop-shadow(0 0 8px rgba(6, 182, 212, .5))}@media (max-width:768px){.flex.items-center.space-x-4{flex-wrap:wrap;justify-content:center;gap:.5rem}.w-12.h-0\.5{display:none}.grid-cols-1.lg\:grid-cols-3{gap:1rem}.space-y-8>*+*{margin-top:1.5rem}.text-2xl{font-size:1.5rem}.grid-cols-4.md\:grid-cols-8{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}.grid-cols-1.md\:grid-cols-2,.grid-cols-1.md\:grid-cols-3{grid-template-columns:repeat(1,minmax(0,1fr));gap:1rem}.font-tech{font-size:.875rem}.glass,.glass-hover{padding:1.5rem;margin-bottom:1.5rem}.text-3xl{font-size:1.875rem}.flex.items-start.gap-4{flex-direction:column;align-items:center;text-align:center;gap:1rem}.w-12.h-12{margin:0}.p-8{padding:1.5rem}.mb-12{margin-bottom:2rem}}@media (max-width:640px){.text-lg{font-size:1rem}.p-6{padding:1rem}.space-y-8>*+*{margin-top:1.5rem}.space-y-6>*+*{margin-top:1rem}details summary{font-size:.95rem}.font-tech{font-size:.7rem}}@media print{.glass,.glass-hover{background:#fff;color:#000;border:1px solid #ccc;break-inside:avoid}.glow-text{color:#000!important;-webkit-text-fill-color:black!important}details{break-inside:avoid}details[open] summary~*{display:block!important}.bg-blue-500\/10,.bg-cyan-500\/10,.bg-green-500\/10,.bg-orange-500\/20,.bg-purple-500\/10,.bg-red-500\/20,.bg-yellow-500\/20{background:#f5f5f5!important;border:1px solid #ddd!important}}details summary:focus{outline:#06b6d4 solid 2px;outline-offset:2px;border-radius:4px}@media (prefers-color-scheme:dark){.glass,.glass-hover{background:rgba(255,255,255,.03)}.glass-hover:hover{background:rgba(255,255,255,.06)}}.lang-btn{@apply btn-secondary p-3 text-center transition-all duration-300 text-sm flex flex-col items-center;}.lang-btn.active{@apply bg-cyan-500/20 border-cyan-500/40 text-cyan-400;}.lang-btn:hover{@apply scale-105;}.code-block{@apply bg-gray-900/50 border border-gray-700 rounded-lg p-4 font-tech text-sm overflow-x-auto;}.voice-recording{animation:1.5s ease-in-out infinite pulse-voice}@keyframes pulse-voice{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(6,182,212,.7)}50%{transform:scale(1.05);box-shadow:0 0 0 10px rgba(6,182,212,0)}}.camera-overlay{position:absolute;border:2px dashed #06b6d4;border-radius:8px;padding:20px;background:rgba(6,182,212,.1);pointer-events:none}@keyframes progress-fill{0%{width:0%}100%{width:var(--progress-width)}}.progress-animated{animation:.5s ease-out progress-fill}