@import"https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap";*{margin:0;padding:0;box-sizing:border-box}:root{--red: #e6002e;--red-dark: #c80028;--yellow: #ffd600;--yellow-dark: #e6c000;--black: #1a1a1a;--white: #fffef7;--outline: 3px solid #1a1a1a;--outline-thin: 2px solid #1a1a1a;font-family:Fredoka,Segoe UI,system-ui,sans-serif;line-height:1.4;font-weight:500;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh;min-height:100dvh}#root{min-height:100vh;min-height:100dvh}@keyframes wiggle{0%,to{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}@keyframes bounce-in{0%{transform:scale(.3);opacity:0}50%{transform:scale(1.05)}70%{transform:scale(.97)}to{transform:scale(1);opacity:1}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.08)}to{transform:scale(1)}}.config-panel{background:var(--white);border-radius:22px;border:var(--outline-thin);padding:1.8rem 1.6rem;box-shadow:5px 5px 0 var(--black);max-width:380px;width:100%;animation:bounce-in .5s ease}.config-panel h1{margin:0 0 .3rem;text-align:center;font-size:1.7rem;font-weight:700;color:var(--red);text-shadow:1px 1px 0 var(--yellow);animation:wiggle 3s ease-in-out infinite}.config-panel .subtitle{margin:0 0 1.2rem;text-align:center;font-size:.75rem;font-weight:500;color:#888;line-height:1.3}.field-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.8rem;margin-bottom:1rem}.field-grid-4{grid-template-columns:1fr 1fr 1fr 1fr}.field{margin-bottom:.8rem}.field-grid .field,.field-row .field{margin-bottom:0}.field label{display:block;margin-bottom:.35rem;font-weight:600;color:var(--black);font-size:.82rem}.field input[type=number]{width:100%;padding:.55rem .6rem;border:var(--outline-thin);border-radius:10px;font-size:.95rem;font-family:inherit;background:#fff8e1;box-sizing:border-box;transition:border-color .2s,box-shadow .2s}.field input[type=number]:focus{outline:none;border-color:var(--red);box-shadow:2px 2px 0 var(--red)}.checkbox-field{margin-bottom:.8rem}.checkbox-field label{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-weight:600;color:var(--black);font-size:.9rem}.checkbox-field input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:var(--red)}.random-sound-config{background:#fff3e0;border-radius:12px;border:var(--outline-thin);padding:.8rem;margin-bottom:1rem}.field-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.8rem}.presets-section{margin-bottom:1rem}.presets-label{display:block;font-weight:600;font-size:.82rem;color:var(--black);margin-bottom:.4rem}.preset-list{display:flex;flex-wrap:wrap;gap:.4rem}.preset-item{display:flex;align-items:center;gap:0}.preset-btn{padding:.3rem .7rem;background:#fff8e1;border:2px solid var(--black);border-right:none;border-radius:50px 0 0 50px;font-size:.8rem;font-weight:600;font-family:inherit;cursor:pointer;transition:background .15s}.preset-btn:hover{background:var(--yellow)}.preset-delete{padding:.3rem .45rem;background:#fff8e1;border:2px solid var(--black);border-left:1px solid #ccc;border-radius:0 50px 50px 0;font-size:.8rem;font-weight:700;font-family:inherit;cursor:pointer;color:#999;line-height:1;transition:background .15s,color .15s}.preset-delete:hover{background:var(--red);color:var(--white)}.save-row{margin-bottom:.8rem}.save-preset-btn{width:100%;padding:.5rem;background:#fff8e1;border:2px dashed #ccc;border-radius:10px;font-size:.85rem;font-weight:600;font-family:inherit;color:#888;cursor:pointer;transition:border-color .15s,color .15s}.save-preset-btn:hover{border-color:var(--red);color:var(--red)}.save-input-row{display:flex;gap:.4rem}.save-name-input{flex:1;padding:.45rem .6rem;border:var(--outline-thin);border-radius:10px;font-size:.85rem;font-family:inherit;background:#fff8e1}.save-name-input:focus{outline:none;border-color:var(--red);box-shadow:2px 2px 0 var(--red)}.save-confirm-btn{padding:.45rem .8rem;background:var(--red);color:var(--white);border:2px solid var(--black);border-radius:10px;font-size:.82rem;font-weight:700;font-family:inherit;cursor:pointer;white-space:nowrap}.save-cancel-btn{padding:.45rem .6rem;background:var(--white);color:#888;border:2px solid #ccc;border-radius:10px;font-size:.9rem;font-weight:700;font-family:inherit;cursor:pointer;line-height:1}.save-cancel-btn:hover{border-color:var(--black);color:var(--black)}.start-btn{width:100%;padding:.85rem;background:var(--red);color:var(--white);border:var(--outline-thin);border-radius:50px;font-size:1.15rem;font-weight:700;font-family:inherit;cursor:pointer;transition:transform .15s,box-shadow .15s;box-shadow:3px 3px 0 var(--black)}.start-btn:hover{transform:translateY(-1px);box-shadow:4px 4px 0 var(--black)}.start-btn:active{transform:translateY(1px);box-shadow:1px 1px 0 var(--black)}.timer-display{border-radius:22px;border:var(--outline-thin);padding:2rem 1.5rem 1.6rem;max-width:380px;width:100%;text-align:center;transition:background .4s ease;box-shadow:5px 5px 0 var(--black);animation:bounce-in .4s ease}.timer-display.practice{background:linear-gradient(160deg,#e3f2fd,#bbdefb);color:var(--black)}.timer-display.break{background:linear-gradient(160deg,#fff8e1,#ffecb3);color:var(--black)}.timer-display.countdown{background:linear-gradient(160deg,#fce4ec,#f8bbd0);color:var(--black)}.timer-display.finished{background:linear-gradient(160deg,#e8f5e9,#c8e6c9);color:var(--black)}.phase-label{display:inline-block;font-size:.95rem;font-weight:700;margin-bottom:.5rem;letter-spacing:.08em;padding:.25rem 1.1rem;border-radius:50px;border:2px solid var(--black)}.timer-display.countdown .phase-label{background:#e91e63;color:var(--white);box-shadow:2px 2px 0 var(--black)}.timer-display.countdown .countdown{color:#c2185b}.timer-display.practice .phase-label{background:var(--red);color:var(--white);box-shadow:2px 2px 0 var(--black)}.timer-display.break .phase-label{background:var(--yellow);color:var(--black);box-shadow:2px 2px 0 var(--black)}.timer-display.finished .phase-label{background:#00c853;color:var(--white);box-shadow:2px 2px 0 var(--black);animation:pop .6s ease infinite}.countdown{font-size:5rem;font-weight:700;line-height:1;margin:.6rem 0;text-shadow:2px 2px 0 rgba(0,0,0,.1);animation:float 3s ease-in-out infinite}.timer-display.practice .countdown{color:#1565c0}.timer-display.break .countdown{color:#e65100}.timer-display.finished .countdown{color:#2e7d32}.set-info{font-size:.9rem;font-weight:600;margin-bottom:1.2rem;color:#555}.finished-message{font-size:1.4rem;font-weight:700;margin:.5rem 0 1.5rem;color:#2e7d32;animation:wiggle 2s ease-in-out infinite}.controls{display:flex;gap:.8rem;justify-content:center}.btn{padding:.6rem 1.5rem;border:2px solid var(--black);border-radius:50px;font-size:.95rem;font-weight:700;font-family:inherit;cursor:pointer;transition:transform .12s,box-shadow .12s;box-shadow:2px 2px 0 var(--black)}.btn:hover{transform:translateY(-1px);box-shadow:3px 3px 0 var(--black)}.btn:active{transform:translateY(1px);box-shadow:1px 1px 0 var(--black)}.stop-btn{background:var(--yellow);color:var(--black)}.reset-btn{background:var(--white);color:var(--black)}.progress-container{max-width:380px;width:100%}.progress-bar{height:12px;background:var(--white);border-radius:50px;border:2px solid var(--black);overflow:hidden;box-shadow:2px 2px 0 var(--black)}.progress-fill{height:100%;background:repeating-linear-gradient(-45deg,var(--red),var(--red) 6px,var(--yellow) 6px,var(--yellow) 12px);border-radius:50px;transition:width .5s ease}.progress-label{text-align:center;margin-top:.5rem;font-size:.85rem;font-weight:600;color:var(--white);text-shadow:1px 1px 0 rgba(0,0,0,.4)}.app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem 1.2rem;gap:1.4rem;box-sizing:border-box;transition:background .5s ease;position:relative;overflow:hidden}.app:before{content:"";position:fixed;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.12) 10%,transparent 11%);background-size:36px 36px;pointer-events:none;z-index:0}.app>*{position:relative;z-index:1}.app.idle{background:linear-gradient(160deg,#ff6b81,#e6002e,#c80028)}.app.countdown{background:linear-gradient(160deg,#f48fb1,#e91e63,#c2185b)}.app.practice{background:linear-gradient(160deg,#4a9eff,#2979ff,#1565c0)}.app.break{background:linear-gradient(160deg,#ffd600,#ffab00,#ff8f00)}.app.finished{background:linear-gradient(160deg,#69f0ae,#00e676,#00c853)}