*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--cream:#f5ecd7;--pink:#e8566a;--yellow:#f5c842;--teal:#3bbfad;--red:#c94b3a;--blue:#4a7fc1;--dark:#1a1a1a;--ink:#2d2a26;--font-display:"ZCOOL KuaiLe", cursive;--font-body:"Noto Sans SC", sans-serif;--radius-sm:8px;--radius-md:16px;--radius-lg:24px;--radius-xl:36px;--shadow-pop:4px 4px 0px var(--dark);--shadow-pop-lg:6px 6px 0px var(--dark);--shadow-pop-hover:8px 8px 0px var(--dark)}html,body{background:var(--cream);color:var(--ink);font-family:var(--font-body);min-height:100vh;font-size:16px;line-height:1.6}h1,h2,h3{font-family:var(--font-display);line-height:1.2}.card{border:2.5px solid var(--dark);border-radius:var(--radius-md);box-shadow:var(--shadow-pop);background:#fff;padding:24px;transition:box-shadow .15s,transform .15s}.card:hover{box-shadow:var(--shadow-pop-hover);transform:translate(-2px,-2px)}.btn{font-family:var(--font-display);border:2.5px solid var(--dark);border-radius:var(--radius-xl);cursor:pointer;box-shadow:var(--shadow-pop);align-items:center;gap:8px;padding:12px 28px;font-size:1rem;text-decoration:none;transition:box-shadow .12s,transform .12s;display:inline-flex}.btn:hover{box-shadow:var(--shadow-pop-hover);transform:translate(-2px,-2px)}.btn:active{box-shadow:2px 2px 0 var(--dark);transform:translate(2px,2px)}.btn-primary{background:var(--pink);color:#fff}.btn-yellow{background:var(--yellow);color:var(--dark)}.btn-teal{background:var(--teal);color:#fff}.btn-outline{color:var(--dark);background:0 0}.badge{font-family:var(--font-display);border:2px solid var(--dark);box-shadow:2px 2px 0 var(--dark);border-radius:999px;padding:4px 12px;font-size:.8rem;display:inline-block}.divider{border:none;border-top:2.5px dashed var(--dark);opacity:.25;margin:20px 0}.grade-S{color:#fff;background:#7c3aed}.grade-A{color:#fff;background:var(--teal)}.grade-B{color:var(--dark);background:var(--yellow)}.grade-C{color:#fff;background:var(--blue)}.grade-D{color:#fff;background:var(--red)}.grade-F{color:#fff;background:var(--dark)}.progress-track{border:2px solid var(--dark);background:#e8e0d0;border-radius:999px;height:14px;overflow:hidden}.progress-fill{border-radius:999px;height:100%;transition:width .8s cubic-bezier(.34,1.56,.64,1)}@keyframes pop-in{0%{opacity:0;transform:scale(.92)translateY(12px)}to{opacity:1;transform:scale(1)translateY(0)}}.pop-in{animation:.35s forwards pop-in}@keyframes spin-slow{to{transform:rotate(360deg)}}.spin-slow{animation:3s linear infinite spin-slow}@keyframes pulse-scale{0%,to{transform:scale(1)}50%{transform:scale(1.04)}}.pulse{animation:2s ease-in-out infinite pulse-scale}.container{max-width:900px;margin:0 auto;padding:0 24px}.center{text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex}textarea,input,select{font-family:var(--font-body);border:2.5px solid var(--dark);border-radius:var(--radius-md);width:100%;color:var(--ink);resize:vertical;background:#fffdf7;outline:none;padding:14px 18px;font-size:1rem;transition:box-shadow .15s}textarea:focus,input:focus,select:focus{box-shadow:4px 4px 0 var(--pink)}.receipt-font{font-family:Courier New,Courier,monospace}