main{display:flex;margin:0;max-width:none;background:url("./aurora-4WVRVGWC.webp");background-size:cover;position:relative}#exercise{display:flex;width:600px;max-width:100%;flex:1;margin:0 1em;padding:1em;flex-direction:column;align-items:center;justify-content:center;position:relative}#exercise>p{margin-left:4em;margin-right:4em;text-align:center}#attributions{position:absolute;left:6px;bottom:4px;font-size:12px;color:#fff}#attributions>a{text-decoration:underline;color:inherit}.dialog{display:flex;border-radius:16px;flex-direction:column;align-items:center;padding:2em;background:#fffb}@property --progress{initial-value: 0%; inherits: false; syntax: "<percentage>";}#progress{--color: #e9a07f;position:absolute;left:50%;top:2em;width:calc(100% - 8px);height:20px;transform:translate(-50%);background:linear-gradient(to right,var(--color) 0 var(--progress),#f8f8f8 var(--progress));border-radius:10px}#progress.animate{animation:progress var(--duration) linear}#bubble{--base: #e9a07f;--expand: #ffaf8b;display:flex;width:280px;height:280px;margin-top:28px;background:var(--base);color:#fff;align-items:center;justify-content:center;border-radius:50%;transform:scale(.5);user-select:none}#bubble>span{margin-top:-6px;font-size:4em}#bubble.animate{animation:bubble 5s ease-in-out infinite alternate}#bubble.animate>span{animation:text 5s ease-in-out infinite alternate}#bubble.done{animation:none;transform:scale(1);background:#e477e1}@keyframes bubble{0%{transform:scale(.5);background:var(--base)}to{transform:scale(1);background:var(--expand)}}@keyframes text{0%{transform:scale(.6)}to{transform:scale(1)}}@keyframes progress{0%{--progress: 0%}to{--progress: 100%}}@media screen and (max-width:960px){#exercise>p{margin-left:0;margin-right:0}}