:root{--main-bg: #fff6e9;--main-primary: #c97c41;--main-secondary: #a05a2c;--main-accent: #9b632b;--main-card: #fff6e9;--main-text: #3e2723;--main-border: #b87333;--main-muted: #f7e1c6;--main-heading: #7c3f00;font-family:Segoe UI,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;color:var(--main-text);background-color:var(--main-bg);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:var(--main-primary);text-decoration:inherit}a:hover{color:var(--main-accent)}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;background-color:var(--main-bg);animation:fadein-bg 1.2s cubic-bezier(.4,0,.2,1)}@keyframes fadein-bg{0%{opacity:0}to{opacity:1}}h1{font-size:2.6em;line-height:1.1;color:var(--main-heading);letter-spacing:1px;margin-bottom:1.5rem;font-weight:700;animation:fadein-comp 1s cubic-bezier(.4,0,.2,1)}@keyframes fadein-comp{0%{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:translateY(0)}}button{border-radius:14px;border:1.5px solid var(--main-primary);padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background:var(--main-primary);color:#fff;cursor:pointer;transition:background .18s,border-color .18s,color .18s,transform .12s cubic-bezier(.4,0,.2,1),box-shadow .18s;box-shadow:0 2px 8px #c97c4122;position:relative;z-index:1}button:hover{background:var(--main-accent);color:var(--main-heading);border-color:var(--main-accent);box-shadow:0 4px 16px #c97c4133;transform:translateY(-2px) scale(1.04)}button:active{transform:scale(.97);box-shadow:0 1px 4px #c97c4111}button:focus,button:focus-visible{outline:none}@media (prefers-color-scheme: dark){:root{color:#f7e1c6;background-color:#3e2723}body{background-color:#3e2723}h1{color:var(--main-accent)}}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center;background:none}.App{background:var(--zen-card);border-radius:28px;padding:2rem 0 3rem}.card{padding:2em;background:var(--zen-card);border-radius:22px}.read-the-docs{color:var(--zen-secondary)}.pretty-player,.ambient-player{display:flex;flex-direction:column;align-items:center;background:#fff6e9;border-radius:1.5rem;box-shadow:0 6px 32px #c97c411a;padding:2.2rem 2.2rem 1.5rem;max-width:340px;margin:2.5rem auto 1.5rem;border:1.5px solid #e6b07a;min-width:240px;transition:box-shadow .18s,border-color .18s}.pretty-player__artwork{margin-bottom:1.1rem}.pretty-player__cd{width:66px;height:66px;border-radius:50%;background:#f7e1c6;box-shadow:0 2px 12px #c97c4122;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.pretty-player__cd-img{width:56px;height:56px;border-radius:50%;background:url(https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=facearea&w=256&q=80) center/cover no-repeat;border:2.5px solid #fff6e9;box-shadow:0 1px 4px #c97c4111}.pretty-player__info{text-align:center;width:100%;margin-bottom:.7rem}.pretty-player__title{font-size:1.13rem;font-weight:700;color:#c97c41;margin-bottom:.1rem;letter-spacing:.2px}.pretty-player__artist{font-size:.98rem;color:#a05a2c;opacity:.85;margin-top:.1rem}.pretty-player__progress{width:100%;margin:.7rem 0 1.1rem;position:relative;height:22px;display:flex;align-items:center;z-index:0}.pretty-player__progress-bg{position:absolute;left:0;top:50%;transform:translateY(-50%);width:100%;height:8px;border-radius:4px;z-index:1;pointer-events:none}.pretty-player__progress-bar{width:100%;height:22px;background:transparent;position:relative;z-index:2;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;margin:0;padding:0}.pretty-player__progress-bar::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#c97c41;box-shadow:0 2px 8px #c97c4122;border:3px solid #fff6e9;cursor:pointer;margin-top:0;position:relative;top:50%;transform:translateY(-50%)}.pretty-player__progress-bar::-webkit-slider-runnable-track{height:22px;background:transparent}.pretty-player__progress-bar::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#c97c41;border:3px solid #fff6e9;box-shadow:0 2px 8px #c97c4122;cursor:pointer;position:relative;top:50%;transform:translateY(-50%)}.pretty-player__progress-bar::-ms-thumb{width:20px;height:20px;border-radius:50%;background:#c97c41;border:3px solid #fff6e9;box-shadow:0 2px 8px #c97c4122;cursor:pointer;position:relative;top:50%;transform:translateY(-50%)}.pretty-player__progress-indicator{position:absolute;left:0;top:50%;height:6px;background:#c97c41;border-radius:3px;transform:translateY(-50%);z-index:3;pointer-events:none;width:0}.pretty-player__controls{display:flex;align-items:center;gap:1.1rem;margin-bottom:1.1rem;justify-content:center}.pretty-player__button{background:#c97c41;border:none;border-radius:10px;width:44px;height:44px;color:#fff;font-size:1.5rem;cursor:pointer;transition:background .18s,box-shadow .18s,transform .12s,color .18s;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #c97c4122;outline:none;position:relative;border:2px solid #fff6e9;padding:0}.pretty-player__button:focus-visible{outline:2px solid #e6b07a;outline-offset:2px}.pretty-player__button:hover,.pretty-player__button:active{background:#a05a2c;color:#fff;box-shadow:0 4px 16px #c97c4133;transform:scale(1.07);border-color:#e6b07a}.pretty-player__icon{display:flex;align-items:center;justify-content:center;width:22px;height:22px;margin:auto;position:relative}.pretty-player__icon--pause{width:18px;height:22px;display:flex;justify-content:space-between}.pretty-player__icon--pause span{display:block;width:6px;height:22px;background:#fff;border-radius:2px}.pretty-player__icon--prev,.pretty-player__icon--next{width:22px;height:22px;position:relative}.pretty-player__icon--prev:before,.pretty-player__icon--next:before{content:"";position:absolute;top:3px;width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent}.pretty-player__icon--prev:before{left:7px;border-right:10px solid #fff}.pretty-player__icon--next:before{left:5px;border-left:10px solid #fff}.pretty-player__icon--prev:after,.pretty-player__icon--next:after{content:"";position:absolute;top:3px;width:4px;height:16px;background:#fff;border-radius:2px}.pretty-player__icon--prev:after{left:2px}.pretty-player__icon--next:after{right:2px}.pretty-player__volume{width:100%;display:flex;align-items:center;justify-content:flex-end;margin-bottom:.2rem}.pretty-player__volume input[type=range]{width:90px;accent-color:#c97c41;height:4px;border-radius:2px;background:#f7e1c6;outline:none;margin-left:.5rem}@media (max-width: 480px){.pretty-player,.ambient-player{padding:1.25rem .75rem 1rem;max-width:98vw;min-width:0}.pretty-player__controls,.ambient-player__controls{gap:.75rem}.pretty-player__volume input[type=range]{width:60px}.pretty-player__button,.ambient-player__button{width:36px;height:36px;font-size:1rem;border-radius:8px}}.pomodoro{background:var(--main-card);padding:2.2rem 2rem 1.7rem;border-radius:20px;text-align:center;max-width:400px;margin:2.5rem auto 2rem;border:2.5px solid var(--main-primary);color:var(--main-text);position:relative}.pomodoro.break{border-color:var(--main-secondary)}.pomodoro h2{color:var(--main-primary);font-weight:700;margin-bottom:.7em;letter-spacing:1px}.timer{font-size:3.2rem;margin:1.2rem 0 1.5rem;color:var(--main-secondary);letter-spacing:2px;font-variant-numeric:tabular-nums;font-weight:700;background:none;text-shadow:0 2px 8px var(--main-muted)}.buttons{margin-top:1rem;margin:1rem;font-size:1.08em;font-weight:500;border-radius:14px;gap:.5rem;display:flex;min-width:10px}button{min-width:30px}button:active{background:var(--main-secondary);color:var(--main-heading)}.modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#00000059;z-index:100;display:flex;align-items:center;justify-content:center}.modal-content{background:var(--main-card);padding:32px;border-radius:16px;min-width:320px;max-width:90%;box-shadow:0 8px 32px #00000040;position:relative;animation:modalIn .2s}.modal-close{position:absolute;top:10px;right:20px;justify-content:center;justify-items:center;background:none;width:20px;border:none;font-size:15px;color:var(--main-muted);cursor:pointer}.modal-title{margin-top:0;margin-bottom:18px;color:var(--main-primary)}.modal-body{display:flex;flex-direction:column;gap:12px}.modal-body .row{display:flex;align-items:center;justify-content:space-between}.modal-body label{flex:1;text-align:left;margin-bottom:0}.modal-body input{flex:0;text-align:right;margin-left:8px;width:60px;padding:4px;border-radius:6px;border:1px solid var(--main-border)}.modal-body .toggle-container{display:flex;align-items:center;justify-content:space-between}.modal-body .toggle-container label{flex:1;text-align:left}.modal-body .toggle-container .toggle-button{flex:0}.modal-footer{display:flex;justify-content:space-between;margin-top:15px;align-items:center}.modal-button{background:#a05a2c;border:none;border-radius:6px;gap:.5rem;padding:6px 14px;color:#fff;cursor:pointer}.modal-footer button{background:var(--main-accent);border:none;width:6.5rem;border-radius:6px;padding:6px 10px;color:#fff;cursor:pointer}.modal-footer button:last-child{background:var(--main-primary);color:#fff}@media (min-width: 769px) and (max-width: 1024px){.modal-content{padding:24px;min-width:320px;max-width:80%}.modal-title{font-size:20px}.modal-body label{font-size:16px}.modal-body input{width:55px;padding:3px}.modal-footer button{padding:5px 12px;font-size:15px}}@media (min-width: 1025px){.modal-content{padding:32px;min-width:400px;max-width:50%}.modal-title{font-size:22px}.modal-body label{font-size:18px}.modal-body input{width:60px;padding:4px}.modal-footer button{padding:6px 14px;font-size:16px}}.modal-overlay{background:#00000059;width:100%;height:100%}.toggle-button{width:40px;height:20px;background:#ccc;border-radius:20px;border:1px solid #ccc;position:relative;cursor:pointer;transition:background .3s ease}.toggle-button.active{background:#a05a2c}.toggle-circle{width:18px;height:18px;background:#fff;border-radius:50%;position:absolute;top:.5px;left:0;transition:left .3s ease}.toggle-button.active .toggle-circle{left:20px}.task-list{background:var(--main-card);padding:2.2rem 2rem 1.7rem;border-radius:20px;max-width:400px;margin:2.5rem auto 2rem;text-align:left;border:2.5px solid var(--main-secondary);color:var(--main-text);position:relative;animation:fadein-comp .9s cubic-bezier(.4,0,.2,1)}@keyframes fadein-comp{0%{opacity:0;transform:translateY(32px)}to{opacity:1;transform:translateY(0)}}.task-list h2{color:var(--main-secondary);margin-bottom:1.2rem;font-weight:700;letter-spacing:1px}.task-input{display:flex;gap:.5rem;margin-bottom:1.2rem}.task-input input{flex:1;padding:.6rem 1rem;font-size:1.08rem;border-radius:10px;border:1.5px solid var(--main-border);background:var(--main-muted);color:var(--main-text);outline:none;transition:border-color .18s,background .18s}.task-input input:focus{border-color:var(--main-primary);background:#fff}.task-input button.pressed{transform:scale(.95);transition:transform .2s}ul{list-style:none;padding:0;margin:0}li{display:flex;align-items:center;justify-content:space-between;padding:.55rem .5rem;border-bottom:1px solid var(--main-border);cursor:pointer;transition:background .15s,transform .18s;border-radius:8px;background:transparent;position:relative;animation:fadein-task .5s cubic-bezier(.4,0,.2,1)}@keyframes fadein-task{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}li.done span{text-decoration:line-through;color:var(--main-accent);opacity:.7;font-style:italic}li span{flex:1;transition:color .2s;font-size:1.08em;padding-left:.2em;text-align:left;display:block}li:hover{background:var(--main-muted);transform:scale(1.03)}li button{background:transparent;border:none;font-size:1.2rem;cursor:pointer;color:var(--main-primary);transition:color .18s,background .18s,box-shadow .18s;border-radius:50%;padding:0;margin-left:.5em;width:2em;height:2em;min-width:2em;min-height:2em;max-width:2em;max-height:2em;display:flex;align-items:center;justify-content:center;flex-shrink:0}li button:hover{color:var(--main-accent);background:var(--main-muted);box-shadow:0 2px 8px #b8733322}
