*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:20px;background-color:#fafad2;color:#111}h1,h2,h3,p{margin:0}img{max-width:100%;object-fit:contain}select{padding:3px}.header{padding:3vw;background-color:#21133b}.header__title{color:#fff;font-size:clamp(1.4rem,2.5vw,2rem)}.container{display:grid;max-width:900px;min-height:610px;margin:0 auto;padding:0 14px 24px}.time-duration-area{margin:20px auto 0;width:min(100%,620px);background-color:#fafad2;text-align:center;padding:10px;border-radius:50px;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:15px}.input-container{display:flex;align-items:center}.input-container label{margin-right:10px}.time-input,.tune{margin-left:auto;margin-right:10px;font-size:max(16px,1em)}.time-input{width:60px;padding:5px}.timer-display-area{display:flex;align-items:center;justify-content:center;text-align:center}.timer-display{text-align:center;font-size:50px}.success-words{display:none;justify-content:center;align-content:center;padding:5px;opacity:0}.success-words.visible{display:grid;animation:revealer .2s ease-in-out infinite alternate}.main-area{display:grid;justify-content:center;z-index:2}.imagebox{display:grid;grid-template-areas:"main-image";justify-content:center;align-items:center;height:auto}.imagebox img{grid-area:main-image}#main-image{cursor:pointer}#alt-image{pointer-events:none;opacity:0}#alt-image.heating{animation:revealer 1s ease-in-out infinite alternate}.rotating{animation:rotator 4s linear infinite}.uparrow{width:30px;margin:20px auto}.instructions{text-align:center}.particle-canvas{opacity:0;pointer-events:none;transition:opacity 1s;position:fixed;inset:0;z-index:1;overflow:hidden}body.coffee-time .particle-canvas{opacity:1}.confetti-piece{position:absolute;top:100%;font-size:2.1rem;animation-name:confetti-rise;animation-timing-function:ease-in-out;animation-fill-mode:forwards}.not-found{gap:16px;align-content:start;padding-top:28px}.not-found a{color:#21133b}@keyframes rotator{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes revealer{0%{opacity:0}to{opacity:1}}@keyframes confetti-rise{0%{transform:translateY(0) rotate(0);opacity:0}12%{opacity:1}58%{transform:translateY(-72vh) rotate(420deg);opacity:1}82%{transform:translateY(-52vh) rotate(520deg);opacity:1}to{transform:translateY(-18vh) rotate(560deg);opacity:0}}