:root{--color-light-bg: #f7f3b5;--color-light-text: #372357;--color-dark-bg: #372357;--color-dark-text: #f7f3b5;--bg-color: var(--color-light-bg);--text-color: var(--color-light-text);--button-bg: var(--color-light-text);--button-text: var(--color-light-bg);font-weight:400;line-height:1.5;text-rendering:optimizeLegibility;font-synthesis:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{display:flex;min-width:320px;min-height:100vh;margin:0;color:var(--text-color);font-family:"Jersey 15",sans-serif;background-color:var(--bg-color);transition:background-color .3s ease,color .3s ease}h1{font-size:3.2em;line-height:1.1}button{border:none;border-radius:2px;padding:.6em 1.2em;color:var(--button-text);font-family:Pixelify Sans,sans-serif;font-weight:500;font-size:1em;text-shadow:1px 1px 0 rgba(0,0,0,.1);background-color:var(--button-bg);transition:filter .25s;cursor:pointer}button:hover{filter:brightness(1.2)}button:focus{outline:none}button:focus-visible{outline:4px auto -webkit-focus-ring-color}button:active{transform:scale(.95)}@media(prefers-color-scheme:dark){:root{--bg-color: var(--color-dark-bg);--text-color: var(--color-dark-text);--button-bg: var(--color-dark-text);--button-text: var(--color-dark-bg)}}[data-theme=dark]{--bg-color: var(--color-dark-bg);--text-color: var(--color-dark-text);--button-bg: var(--color-dark-text);--button-text: var(--color-dark-bg)}[data-theme=light]{--bg-color: var(--color-light-bg);--text-color: var(--color-light-text);--button-bg: var(--color-light-text);--button-text: var(--color-light-bg)}[data-mode=pomodoro]{--color-light-bg: #f7f3b5;--color-light-text: #372357;--color-dark-bg: #372357;--color-dark-text: #f7f3b5}[data-mode=meditation]{--color-light-bg: #ed254e;--color-light-text: #002a32;--color-dark-bg: #002a32;--color-dark-text: #ed254e}.counter__block{display:flex;justify-content:center;margin-block-start:20px;font-size:40px;font-variant-numeric:tabular-nums}.control-buttons__block{display:flex;justify-content:center;gap:40px;margin-block-start:20px;padding-inline:15px}.control-button{inline-size:135px;block-size:40px}.task-static{display:flex;justify-content:space-between;align-items:center}.task-static__controls{display:flex;gap:10px}.task-static__text{margin-inline:15px;overflow-wrap:anywhere;font-family:Pixelify Sans,sans-serif;font-weight:650;line-height:1;max-block-size:100%;white-space:pre-wrap;max-inline-size:100%}.task-static__button,.task-static__status-button{padding:0;background-color:transparent;inline-size:25px;block-size:25px}.task__input{color:var(--text-color);font-family:Pixelify Sans,sans-serif;background-color:transparent}.task-list{display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:5px;margin:0 auto;inline-size:100%;max-inline-size:300px}.task-list__controls{display:flex;justify-content:center;gap:15px;margin-block:80px 20px}.task-list__button{padding:0;color:var(--button-text);font-family:"Jersey 15",sans-serif;font-size:35px;block-size:40px;inline-size:50px}.task-list__empty{font-family:Pixelify Sans,sans-serif}.timer__block{position:relative;margin:0 auto;border:6px solid var(--text-color);border-radius:12px;padding:0;color:var(--text-color);font-family:"Jersey 15",sans-serif;font-size:8rem;line-height:1;letter-spacing:2px;text-shadow:4px 4px 0 rgba(0,0,0,.1);background-color:var(--bg-color);inline-size:300px;font-variant-numeric:tabular-nums}.timer__work-state{position:absolute;right:5px;bottom:5px;margin:0;padding:0;opacity:.8;font-family:Pixelify Sans,sans-serif;font-weight:500;font-size:10px;text-shadow:none}#root{width:100%;margin:0 auto;padding:2rem;text-align:center}.app{position:relative;width:100%;min-height:80vh}.app__buttons{position:absolute;top:calc(20px - 2rem);right:calc(clamp(5px,4vw,40px) - 2rem);display:flex;flex-direction:column;gap:10px;z-index:5}.button-toggle{display:flex;justify-content:center;align-items:center;padding:0;font-size:25px;background-color:inherit;inline-size:30px;block-size:30px}.button-icon{width:24px;height:24px;color:var(--text-color);stroke-width:2}.app__image{position:fixed;bottom:0;left:clamp(10px,1.5vw - 1.5px,20px);z-index:-1;width:clamp(230px,40.7vw - 83px,550px);height:auto;color:var(--text-color)}.button__theme-toggle:focus,.button__theme-toggle:focus-visible{outline:none}@media(max-width:768px){.app__image{display:none}}@media(max-width:425px){.app__buttons{top:calc(250px - 2rem)}}
