@import"https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&family=Varela+Round&family=Hind&display=swap";@import"https://fonts.googleapis.com/css2?family=Varela+Round&display=swap";:root{font-family:Varela Round,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body{margin:0;padding:0;width:100%;height:100vh;overflow:hidden}#root{width:100%;height:100%;position:relative;overflow:hidden}*,*:before,*:after{box-sizing:border-box}button{font-family:inherit}html,body{width:100%;height:100%;margin:0;overflow:hidden;font-family:Nunito,Arial Rounded MT Bold,Helvetica Rounded,Arial,sans-serif}:root{--accent-color: #f1ae04;--accent-color-dark: #dd8530;--accent-color-light: #fff4c7;--bg-color: #feed9b}body{background-color:#feed9b}#root{max-width:none;margin:0;padding:0;text-align:left}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(prefers-reduced-motion:no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}.poll-toggle{appearance:none;background:#fdf8e3;color:#7a673f;border:3px solid #f1ae04;border-radius:999px;padding:.6rem 1.2rem;font-size:.95rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;box-shadow:0 6px #dd853059;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}.poll-toggle:hover{background:#fff4c7;transform:translateY(-1px);box-shadow:0 7px #dd853059}.poll-toggle:active{transform:translateY(3px);box-shadow:0 2px #dd853059}.poll-toggle:focus-visible{outline:3px solid #dd8530;outline-offset:3px}.animated-background{position:fixed;inset:0;width:100%;height:100%;z-index:-1;transition:background-color 2s ease-in-out}@keyframes bg-scroll-horizontal{0%{background-position:0 0}to{background-position:100% 0}}@keyframes bg-scroll-horizontal-reverse{0%{background-position:100% 0}to{background-position:0 0}}@keyframes bg-scroll-diagonal{0%{background-position:0 0}to{background-position:100% 100%}}@keyframes bg-scroll-diagonal-reverse{0%{background-position:100% 100%}to{background-position:0 0}}.dialogue{position:relative;display:flex;width:min(72vw,1100px);max-width:96vw;min-width:280px;margin:0 auto}.dialogue-blobs{position:relative;width:100%;min-height:clamp(120px,16vh,180px);display:flex;flex-direction:column;align-items:center;justify-content:stretch;transform:scale(0);animation:scale-up .6s cubic-bezier(.34,1.56,.64,1) 1s 1 normal forwards}.dialogue-blob-stack{position:absolute;inset:0;width:100%;height:100%;filter:url(#fancy-goo);pointer-events:none}.dialogue-blob-top{position:absolute;top:0;width:100%;height:70%;background-color:#fdf8e3;border-radius:40% 40% 30% 30%/150%;animation:blob 1.5s cubic-bezier(.37,0,.63,1) .3s infinite alternate;transform-origin:center}.dialogue-blob-bottom{position:absolute;bottom:0;width:94%;height:clamp(60px,30%,140px);background-color:#fdf8e3;border-radius:5% 5% 20% 20%/100%;animation:blob 1s infinite alternate cubic-bezier(.37,0,.63,1);transform-origin:center}.dialogue-character-wrap{position:absolute;top:-20px;left:0;z-index:10}.dialogue-character{display:inline-block;margin-right:auto;padding:.5rem 2rem;font-family:Varela Round,sans-serif;font-size:2rem;color:#482016;background-color:#dd8530;border-radius:30%/100% 100% 120% 120%;transform:perspective(2rem) rotateX(0) rotate(0) translate(20%) translateY(-45%) scale(0);animation:fade-character .3s cubic-bezier(.34,1.56,.64,1) 1s 1 normal forwards;white-space:nowrap}.dialogue-text{position:relative;width:100%;padding:1em 1.75em 1.3em;font-family:Hind,sans-serif;font-size:2.5rem;line-height:1.5em;color:#807256;text-align:left;z-index:5}.arrow{position:absolute;bottom:-10px;left:50%;opacity:0;animation:arrow .6s cubic-bezier(.37,0,.63,1) 4.5s infinite alternate;z-index:10}@keyframes blob{0%{transform:rotate(.3deg) scale(1)}to{transform:rotate(-.3deg) scale(.99)}}@keyframes character{0%{transform:translateY(0)}to{transform:translateY(3px)}}@keyframes scale-up{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}@keyframes fade-character{0%{transform:perspective(2rem) rotateX(0) rotate(0) translate(20%) translateY(-45%) scale(.8);opacity:0}to{transform:perspective(2rem) rotateX(0) rotate(0) translate(20%) translateY(-45%) scale(1);opacity:1}}@keyframes arrow{0%{transform:translateY(33%) translate(-50%) scale(1);opacity:1}to{transform:translateY(50%) translate(-50%) scale(.9);opacity:1}}.pomo-bubble{position:absolute;top:32px;right:32px;font-family:Varela Round,sans-serif;z-index:100;animation:gentle-bob 4s ease-in-out infinite}@keyframes gentle-bob{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.pomo-time-bubble{background:linear-gradient(180deg,#fffef5,#fdf8e3);padding:32px 52px 24px;border-radius:55px;box-shadow:0 6px color-mix(in srgb,var(--accent-color-dark) 30%,transparent),0 12px 30px #0000001f,inset 0 2px 4px #fffc;border:4px solid #FFF;outline:3px solid var(--accent-color);position:relative;display:flex;flex-direction:column;align-items:center;transition:outline-color .5s ease,box-shadow .5s ease}.pomo-time-bubble:before{content:"";position:absolute;top:10px;left:30px;right:30px;height:10px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent);border-radius:50%}.pomo-time-text{font-size:7rem;font-weight:900;letter-spacing:.02em;line-height:1;color:#5d4e37;text-shadow:2px 2px 0px rgba(255,255,255,.6);font-variant-numeric:tabular-nums}.pomo-phase-label{font-size:1.1rem;font-weight:700;text-transform:uppercase;letter-spacing:2px;margin-top:8px;opacity:.7}.pomo-phase-label.work{color:#8b6914}.pomo-phase-label.break{color:#00897b}.now-playing{position:absolute;top:32px;left:32px;z-index:100;opacity:0;transform:translate(-20px);transition:opacity .35s ease,transform .35s ease}.now-playing.hidden{opacity:0;transform:translate(-20px)}.now-playing.entering,.now-playing.visible{opacity:1;transform:translate(0)}.now-playing.exiting{opacity:0;transform:translate(-20px)}.now-playing-bubble{display:flex;align-items:center;gap:14px;background:linear-gradient(145deg,#fff9e6,#fff5d6);border:4px solid var(--accent-color);border-radius:20px;padding:12px 18px 12px 12px;box-shadow:0 4px 12px color-mix(in srgb,var(--accent-color-dark) 15%,transparent),0 2px 4px color-mix(in srgb,var(--accent-color-dark) 10%,transparent),inset 0 1px #fffc;animation:gentle-float 5s ease-in-out infinite;transition:border-color .5s ease,box-shadow .5s ease}@keyframes gentle-float{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.album-art-container{position:relative;width:56px;height:56px;border-radius:12px;overflow:hidden;flex-shrink:0;background:var(--accent-color-light);box-shadow:0 2px 8px color-mix(in srgb,var(--accent-color-dark) 20%,transparent),inset 0 1px 2px #0000001a;transition:background .5s ease,box-shadow .5s ease}.album-art{width:100%;height:100%;object-fit:cover;border-radius:12px}.album-art-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#a8d5ba,#8bc4a0);color:#5d7a5d}.album-art-fallback .music-icon{width:28px;height:28px;opacity:.8}.record-spin{position:absolute;inset:0;border-radius:12px;background:radial-gradient(circle at center,transparent 30%,rgba(0,0,0,.03) 31%,transparent 32%,rgba(0,0,0,.02) 50%,transparent 51%);animation:record-rotate 8s linear infinite;pointer-events:none}@keyframes record-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.track-info{display:flex;flex-direction:column;gap:2px;min-width:0}.now-playing-label{display:flex;align-items:center;gap:4px;font-size:.7rem;font-weight:600;color:var(--accent-color-dark);text-transform:uppercase;letter-spacing:.5px;transition:color .5s ease}.now-playing-label .music-icon{width:12px;height:12px;animation:bounce-note 1.5s ease-in-out infinite}@keyframes bounce-note{0%,to{transform:translateY(0) rotate(0)}25%{transform:translateY(-2px) rotate(-5deg)}75%{transform:translateY(1px) rotate(5deg)}}.track-title{font-size:1rem;font-weight:700;color:#5d4e37;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}.track-artist{font-size:.85rem;font-weight:500;color:#8b774f;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}.music-bars{display:flex;align-items:flex-end;gap:2px;height:16px}.music-bars .bar{width:3px;background:var(--accent-color);border-radius:2px;animation:music-bar .8s ease-in-out infinite;transition:background .5s ease}.music-bars .bar:nth-child(1){animation-delay:0s}.music-bars .bar:nth-child(2){animation-delay:.2s}.music-bars .bar:nth-child(3){animation-delay:.4s}@keyframes music-bar{0%,to{height:4px}50%{height:14px}}.corner-clock{position:absolute;bottom:20px;left:20px;z-index:30;pointer-events:auto;display:flex;flex-direction:column;gap:8px;padding:12px 16px;min-width:170px;background:#fdf8e3;border:3px solid var(--accent-color);border-radius:18px;box-shadow:0 8px color-mix(in srgb,var(--accent-color-dark) 25%,transparent);font-family:Varela Round,sans-serif;color:#7a673f;text-align:center;transition:border-color .5s ease,box-shadow .5s ease}.corner-clock__time{display:flex;align-items:baseline;justify-content:center;gap:10px;letter-spacing:.16em;text-transform:uppercase}.corner-clock__digits{font-size:clamp(1.3rem,2.2vw,1.9rem);font-weight:800;color:#584c36}.corner-clock__ampm{font-size:.75rem;font-weight:700;letter-spacing:.25em;color:var(--accent-color-dark);transition:color .5s ease}.corner-clock__divider{height:2px;border-radius:2px;background:var(--accent-color);opacity:.8;transition:background .5s ease}.corner-clock__date{display:flex;align-items:center;justify-content:center;gap:10px}.corner-clock__weekday{padding:6px 10px;border-radius:999px;background:var(--accent-color-light);color:#6f5e68;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;transition:background .5s ease}.corner-clock__monthday{font-size:.9rem;font-weight:700;letter-spacing:.05em;color:#5b4f3a}@media(max-width:768px){.corner-clock{bottom:18px;left:14px;padding:10px 12px;min-width:150px}.corner-clock__digits{font-size:1.25rem}}.corner-links{position:absolute;bottom:20px;right:20px;z-index:30;pointer-events:auto;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:12px;font-family:Varela Round,sans-serif}.corner-link{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;background:#ffebd2;border:2px solid var(--accent-color);border-radius:999px;color:#4e474a;text-decoration:none;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 6px color-mix(in srgb,var(--accent-color-dark) 25%,transparent);transition:transform .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease,border-color .5s ease}.corner-link__icon{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:50%;background:#4e474a;color:#ffebd2;font-size:.7rem;font-weight:800;letter-spacing:.08em;transition:background .15s ease,color .15s ease}.corner-link__label{white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis}@media(max-width:768px){.corner-links{bottom:18px;right:14px;gap:8px}.corner-link{padding:6px 10px;font-size:.7rem}.corner-link__icon{width:24px;height:24px;font-size:.6rem}}.emote-overlay{position:fixed;top:15%;left:50%;transform:translate(-50%);z-index:15;pointer-events:none;opacity:0;transition:opacity .3s ease,transform .3s ease}.emote-overlay.visible{opacity:1}.emote-overlay.visible .emote-container{animation:emote-bounce .5s ease-out}.emote-container{display:flex;align-items:center;justify-content:center}.emote-image{width:120px;height:120px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.2));animation:emote-float 2s ease-in-out infinite}@keyframes emote-bounce{0%{transform:scale(0) translateY(20px);opacity:0}50%{transform:scale(1.2) translateY(-10px)}70%{transform:scale(.9) translateY(5px)}to{transform:scale(1) translateY(0);opacity:1}}@keyframes emote-float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}
