:root{--gradient-start: #a1c4fd;--gradient-end: #c2e9fb;--character-image: url();--md-primary: #3F51B5;--md-primary-dark: #303F9F;--md-accent: #FF4081;--md-warn: #F44336;--md-text-primary: rgba(0, 0, 0, .87);--md-text-secondary: rgba(0, 0, 0, .54);--md-background: #FAFAFA;--md-surface: #FFFFFF;--md-shadow-color: rgba(0, 0, 0, .12)}body{font-family:Roboto,sans-serif;margin:0;padding:0;min-height:100vh;width:100vw;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#f7f7f7;color:var(--md-text-primary);overflow:hidden}.character-image{max-width:clamp(50px,20vw,300px);max-height:clamp(50px,20vh,300px);margin-top:1vmin}#app{position:relative;z-index:2;background-color:#fafafa;padding:3.5vmin;border-radius:8px;box-shadow:0 4px 8px var(--md-shadow-color),0 6px 20px var(--md-shadow-color);text-align:center;max-width:95vw;width:min(700px,95vw);box-sizing:border-box;display:flex;flex-direction:column;gap:2.5vmin;margin:auto}h1{font-size:clamp(1.8rem,5vw,3rem);margin-top:0;margin-bottom:2vmin;color:var(--md-primary-dark);font-weight:500}.timer-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2vmin;margin-bottom:2vmin}.control-group{display:flex;flex-direction:column;align-items:flex-start}.control-group label{font-size:clamp(.9rem,2.5vw,1.1rem);margin-bottom:1vmin;color:var(--md-text-secondary);font-weight:400}.control-group input[type=number],.control-group select{width:100%;padding:1.2vmin 2vmin;border:1px solid #BDBDBD;border-radius:4px;font-size:clamp(1rem,3vw,1.2rem);box-sizing:border-box;transition:border-color .3s ease,box-shadow .3s ease}.control-group input[type=number]:focus,.control-group select:focus{border-color:var(--md-primary);box-shadow:0 0 0 2px #3f51b533;outline:none}.button-group{display:flex;gap:2vmin;grid-column:1 / -1;margin-top:2vmin}.button-group button{flex:1;padding:1.8vmin 2.5vmin;border:none;border-radius:4px;cursor:pointer;font-size:clamp(1rem,3vw,1.2rem);font-weight:500;text-transform:uppercase;transition:background-color .3s ease,box-shadow .3s ease;position:relative;overflow:hidden}button#start{background-color:var(--md-primary);color:#fff}button#start:hover{background-color:var(--md-primary-dark);box-shadow:0 2px 4px #0003}button#stop{background-color:var(--md-warn);color:#fff}button#stop:hover{background-color:#d32f2f;box-shadow:0 2px 4px #0003}.ripple{position:absolute;border-radius:50%;background-color:#ffffffb3;animation:ripple-animation .6s linear;transform:scale(0);pointer-events:none}@keyframes ripple-animation{0%{transform:scale(0);opacity:1}to{transform:scale(1.5);opacity:0}}.timer-display{font-size:clamp(3.5rem,10vw,5.5rem);font-weight:300;margin-bottom:4vmin;color:var(--md-text-primary);letter-spacing:-.05em;display:flex;flex-direction:column;align-items:center}.progress-indicators{display:flex;flex-wrap:wrap;justify-content:space-around;align-items:center;gap:1vmin;margin-top:3vmin}canvas{border:none;border-radius:50%;width:clamp(50px,10vw,100px);height:clamp(50px,10vh,100px);box-shadow:0 2px 4px #0000001a,0 3dpx 10px #00000014;background-color:var(--md-background)}@media (max-width: 768px){#app{padding:4vmin;gap:3vmin}.timer-controls{grid-template-columns:1fr}.button-group{flex-direction:column}}