:root{--ink:#1d1d1d;--surface:#f7f4ee;--shadow:#393738;--accent:#d01b35;--bubble-font:"Brandon Grotesque Thin", "Brandon Grotesque", "Avenir Next", "Helvetica Neue", sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body{min-height:100%}body{color:var(--ink);background:#f7f4ee;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}.canvas-trigger{cursor:pointer;touch-action:manipulation}.canvas-trigger:focus-visible{outline:2px solid var(--ink);outline-offset:-4px}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;width:1px;height:1px;position:absolute;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);border:3px solid var(--ink);opacity:0;background:var(--surface);box-shadow:7px 7px 0 var(--shadow);transform:translate(-50%, -50%) rotate(var(--bubble-tilt)) scale(0);border-radius:50%;place-items:center;animation:.65s cubic-bezier(.16,1.45,.34,1) forwards bubble-pop;display:grid;position:absolute}.bubble-copy{width:70%;color:var(--ink);font-family:var(--bubble-font);font-size:var(--bubble-font-size);letter-spacing:-.06em;text-align:center;flex-direction:column;align-items:center;font-weight:300;line-height:1;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.bubble-copy-line{width:var(--bubble-line-width);white-space:nowrap;flex:none;display:block}.empty-canvas-hint{z-index:-1;color:#aaa59d;font-family:var(--bubble-font);letter-spacing:-.07em;pointer-events:none;-webkit-user-select:none;user-select:none;font-size:clamp(3rem,11vw,10rem);font-weight:300;line-height:.85;position:relative}@keyframes bubble-pop{0%{opacity:0;transform:translate(-50%, -50%) rotate(var(--bubble-tilt)) scale(0)}65%{opacity:.82;transform:translate(-50%, -50%) rotate(var(--bubble-tilt)) scale(1.12)}82%{opacity:.78;transform:translate(-50%, -50%) rotate(var(--bubble-tilt)) scale(.94)}to{opacity:.78;transform:translate(-50%, -50%) rotate(var(--bubble-tilt)) scale(1)}}.generator-bar{z-index:1;border:3px solid var(--ink);background:var(--surface);width:min(624px,94vw);height:130px;box-shadow:7px 7px 0 var(--shadow);border-radius:2px;display:flex;position:relative}.generate-button{border:0;border-right:3px solid var(--ink);color:#bebebe;background:var(--accent);cursor:pointer;border-radius:0;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:#ad142b}.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:#bebebe;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%, #39373829, transparent 28%), var(--surface);border-radius: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:#393738}.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:5px 5px 0 var(--shadow);border-radius:2px;flex-direction:column}.generate-button{border-right:0;border-bottom:3px solid var(--ink);border-radius:0;width:100%;height:66px}.problem-panel{border-radius:0;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}}