:root{--ink:#3c174d;--pink:#ff4fa3;--yellow:#ffe66d;--cream:#fffaf0}*{box-sizing:border-box;margin:0;padding:0}html,body{min-height:100%}body{color:var(--ink);background:radial-gradient(circle at 18% 12%,#ffffffbf,#0000 28%),linear-gradient(135deg,#fff18e 0%,#ffd767 42%,#ff9bcf 100%);font-family:Arial Rounded MT Bold,Trebuchet MS,system-ui,sans-serif}button{font:inherit}.page-shell{isolation:isolate;place-items:center;min-height:100svh;padding:2rem;display:grid;position:relative;overflow:hidden}.bubble-field{z-index:-2;pointer-events:none;position:fixed;inset:0;overflow:hidden}.floating-bubble{top:var(--bubble-y);left:var(--bubble-x);width:var(--bubble-size);height:var(--bubble-size);opacity:0;background:radial-gradient(circle at 31% 25%, #fffffff0 0 5%, transparent 6%), color-mix(in srgb, var(--bubble-color) 58%, transparent);border:3px solid #ffffffb3;border-radius:50%;animation:.65s cubic-bezier(.16,1.45,.34,1) forwards bubble-pop;position:absolute;transform:translate(-50%,-50%)scale(0);box-shadow:inset -18px -20px 30px #50196421,0 18px 42px #5d1e6429}.bubble-highlight{filter:blur(1px);background:#ffffffc7;border-radius:50%;width:24%;height:11%;position:absolute;top:17%;left:22%;transform:rotate(-35deg)}@keyframes bubble-pop{0%{opacity:0;transform:translate(-50%,-50%)scale(0)}65%{opacity:.82;transform:translate(-50%,-50%)scale(1.12)}82%{opacity:.78;transform:translate(-50%,-50%)scale(.94)}to{opacity:.78;transform:translate(-50%,-50%)scale(1)}}.generator-bar{z-index:1;border:3px solid var(--ink);background:var(--cream);width:min(624px,94vw);height:130px;box-shadow:9px 10px 0 var(--ink);border-radius:38px;display:flex;position:relative}.generate-button{border:0;border-right:3px solid var(--ink);color:#fff;background:var(--pink);cursor:pointer;border-radius:34px 0 0 34px;flex-shrink:0;justify-content:center;align-items:center;width:130px;height:100%;transition:background .16s,transform .16s;display:flex}.generate-button:hover:not(:disabled){background:#ff288f}.generate-button:active:not(:disabled){transform:scale(.96)}.generate-button:focus-visible{outline-offset:-8px;outline:4px solid #fff}.generate-button:disabled{cursor:wait;opacity:.78}.refresh-icon{color:#fff;transform-origin:50%;font-family:Arial,sans-serif;font-size:2.1rem;font-weight:700;line-height:1;transition:transform .18s;display:block}.generate-button:hover:not(:disabled) .refresh-icon{transform:rotate(28deg)scale(1.08)}.refresh-icon.is-loading{animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.problem-panel{background:radial-gradient(circle at 88% 20%, #ffe66d75, transparent 28%), var(--cream);border-radius:0 34px 34px 0;flex:1;justify-content:center;align-items:center;min-width:0;height:100%;padding:0 1.8rem;font-family:Trebuchet MS,system-ui,sans-serif;font-size:1rem;line-height:1.55;display:flex;overflow:hidden}.problem-placeholder,.problem-text{text-align:center;text-wrap:balance;width:100%}.problem-placeholder{color:#b69aad}.problem-text{color:var(--ink);font-weight:700;animation:.52s cubic-bezier(.16,1.35,.3,1) both result-pop}@keyframes result-pop{0%{opacity:0;transform:translateY(8px)scale(.94)}to{opacity:1;transform:translateY(0)scale(1)}}@media (max-width:520px){.page-shell{padding:1.25rem}.generator-bar{width:min(94vw,400px);height:auto;min-height:190px;box-shadow:7px 8px 0 var(--ink);border-radius:32px;flex-direction:column}.generate-button{border-right:0;border-bottom:3px solid var(--ink);border-radius:28px 28px 0 0;width:100%;height:66px}.problem-panel{border-radius:0 0 28px 28px;min-height:118px;padding:1.25rem}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}