:root{font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}body{place-items:center;min-width:320px;min-height:100vh;margin:0;display:flex}#root{width:100%}:root{--light-blue:#60a5fa;--font-family:"Inter", system-ui, -apple-system, sans-serif;--text-main:#0f172a!important;--text-muted:#475569!important}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);color:var(--text-main);background:linear-gradient(135deg,#f8fafc 0%,#e2e8f0 100%);justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}#root{perspective:1000px;justify-content:center;width:100%;display:flex}.container{justify-content:center;width:100%;max-width:700px;display:flex}.card{text-align:center;background:#fffffff2;border-radius:24px;width:100%;padding:22px 16px;box-shadow:0 20px 25px -5px #0000000d,0 10px 10px -5px #0000000a,inset 0 0 0 1px #ffffff80}h1{color:#1e293b;letter-spacing:-.05em;margin-bottom:4px;font-size:2.25rem;font-weight:900}.subtitle{color:var(--text-muted);margin-bottom:20px;font-size:1rem}.digits-grid{grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:16px;display:grid}.digit-box{aspect-ratio:1/1.1;cursor:grab;color:#1e293b;-webkit-user-select:none;user-select:none;background:#fff;border:1.9px dashed #e2e8f0;border-radius:12px;justify-content:center;align-items:center;font-family:Outfit,sans-serif;font-size:2rem;font-weight:900;display:flex;position:relative}.digit-box:hover{background:#f8fafc;border-color:#cbd5e1}.digit-box:active{cursor:grabbing}.original-digit-faded{opacity:1;color:#94a3b8;z-index:5;font-size:2rem;font-weight:800;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.digit-box.dragging{opacity:.4;border-color:var(--light-blue);background:#fff;border-style:solid;border-radius:12px;box-shadow:0 4px 12px #60a5fa33}.digit-box.drag-over{background:#22c55e14;border:2px dashed #22c55e;border-radius:12px}.card-footer{color:#475569;font-size:.95rem}.tip-code{color:#64748b;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:4px;margin:5px;padding:2px 6px;font-family:Source Code Pro,monospace;font-weight:600}@media (width<=768px){.digits-grid{grid-template-columns:repeat(5,1fr);gap:12px}.card{padding:32px 16px}}@media (width<=580px){.digits-grid{grid-template-columns:repeat(4,1fr)}}@media (width<=480px){.digits-grid{grid-template-columns:repeat(3,1fr);gap:12px}.digit-box{font-size:1.75rem}}