:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color:#ffffffde;background-color:#040414;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}body{margin:0;padding:0;display:flex;place-items:center;width:100%;min-height:100dvh}h1{font-size:3.2em;line-height:1.1}body{margin:0 auto;background:linear-gradient(132deg,#00fa,#003,#000);padding:0}#root{width:1550px;max-width:95%;height:900px;max-height:95dvh;margin:0 auto;box-sizing:border-box;text-align:center;background-color:#000;background-image:url(/clock/fondo-clock-11-recortada.avif);background-repeat:no-repeat;background-position:center center;background-attachment:fixed;box-shadow:inset 0 0 12px 12px #000,6px 6px 20px #00f,-6px -6px 14px 3px #000;border-radius:32px}@media (width < 510px){#root,#root:before{overflow:hidden}.clock{overflow:hidden!important;position:relative}.clock .buttons-break{justify-content:space-between!important;column-gap:unset!important;position:absolute!important;top:6px;padding-inline:5px!important;z-index:1}.clock .sphere-big{overflow:hidden!important;position:absolute;top:30px}.clock .buttons-session{justify-content:space-between!important;margin-left:unset!important;column-gap:unset!important;top:2px;padding-inline:2px!important;z-index:1}.clock .panel{top:6px}}@media (width <= 470px){.clock .sphere-big{position:absolute;top:30px;left:50%;transform:translate(-50%);overflow:hidden}.clock .panel{justify-content:center;position:relative;margin:0 auto;text-align:center}}@media (width <= 455px){.clock .panel{left:-3%!important}}@media (width <= 425px){.clock .panel{left:-5%!important}}@media (width <= 375px){.clock .panel{justify-content:space-between!important;column-gap:0!important}.clock .panel .start-stop{left:-40px;right:0!important}}@media (width <= 320px){.clock .panel .button-reset{left:-85px!important}}@media (height <= 880px){#root,#root:before{overflow-y:hidden!important;max-height:100svh!important}.clock .panel{height:150px!important}}.panel{width:100%;height:200px;margin:0 auto;border-radius:0%;position:relative;bottom:44px;column-gap:50px;display:flex;justify-content:center;align-items:center;text-align:center;font-family:system-ui}.panel .button-reset{width:135px;height:129px;font-size:1rem;color:#000c;color:#aff;font-weight:700;cursor:pointer;position:relative;right:31px;bottom:2px;border-radius:50%;border:5px solid #000c;outline:8px solid #0ff1;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#55f4;background-image:linear-gradient(135deg,#0005,#00f5,#0095 66%,#0005);box-shadow:0 0 15px 5px #0ff,0 0 25px 8px #00f,0 0 50px 10px #0ff,0 0 70px 15px #00f,inset 1px 2px 4px 2px #fffa,inset -2px -4px 6px 4px #000;transition:box-shadow .2s ease,outline .1s ease,background .2s ease}.panel .button-reset:active{font-size:.9rem;letter-spacing:.5px;background:#55f2;box-shadow:0 0 15px 5px #0ff,0 0 25px 8px #00f,0 0 60px 20px #0ff,0 0 90px 30px #00f,inset -1px -1px 2px 1px #fff5,inset 0 1px 4px 4px #000;background-image:linear-gradient(135deg,#0007,#00a7,#0097 66%,#0007);outline:8px solid #0ffc}.panel .start-stop{width:130px;height:130px;position:relative;left:6px;bottom:2px}.panel .start-stop #input-start_stop{display:none}.panel .start-stop .label-start-stop{padding:0;position:absolute;width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#000c;color:#aff;font-size:1rem;font-weight:700;text-shadow:0px 0px 4px purple;box-sizing:border-box;cursor:pointer;border-radius:50%;border:5px solid #000c;outline:8px solid #0ff1;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#55f4;background-image:linear-gradient(135deg,#0005,#00f5,#0095 66%,#0005);box-shadow:0 0 15px 5px #0ff,0 0 25px 8px #00f,0 0 50px 10px #0ff,0 0 70px 15px #00f,inset 1px 2px 4px 2px #fffa,inset -2px -4px 6px 4px #000;transition:box-shadow .2s ease,outline .1s ease,background .2s ease}.panel .start-stop #input-start_stop:checked~.label-start-stop,.panel .start-stop .label-start-stop:active{font-size:.9rem;font-weight:700;letter-spacing:.5px;background:#55f2;box-shadow:0 0 15px 5px #0ff,0 0 25px 8px #00f,0 0 60px 20px #0ff,0 0 90px 30px #00f,inset -1px -1px 2px 1px #fff5,inset 0 1px 4px 4px #000;background-image:linear-gradient(135deg,#0007,#00a7,#0097 66%,#0007);outline:8px solid #0ffc}.clock{display:flex;flex-direction:column;flex-wrap:wrap;position:relative;justify-content:center;align-items:center;left:0%;top:0%;width:100%;height:100%;margin:0 auto;border-radius:32px}.clock .buttons-break{width:100%;height:100px;margin:0 auto;padding:0;border-radius:50px;position:relative;bottom:-2px;column-gap:356px;display:flex;justify-content:center;align-items:end}.clock .buttons-break .buttons-top{width:58px;height:58px;color:#000;font-size:.9rem;font-weight:700;text-shadow:0px 0px 4px black;cursor:pointer;border-radius:50%;border:4px solid #0005;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#05f4;box-shadow:0 0 10px 5px #0ff5,0 0 16px 8px #00f5,0 0 20px 8px #0ffa,0 0 30px 10px #00fa,inset 0 1px 2px 1px #fff7,inset -0px -1px 4px 1px #000a;outline:4px solid #0ff1;transform:rotate(180deg);transition:box-shadow .3s ease,outline .1s ease,background .2s ease}.clock .buttons-break .buttons-top:hover{box-shadow:0 0 12px 5px #0ff5,0 0 18px 8px #00f5,0 0 25px 10px #0ffa,0 0 40px 12px #00fa,inset 0 1px 2px 1px #fff7,inset -0px -1px 4px 1px #000a;outline:3px solid #0ff}.clock .buttons-break .buttons-top:active{font-size:.9rem;box-shadow:0 0 15px 5px #0ff,0 0 20px 8px #00f,0 0 40px 10px #0ff,0 0 55px 15px #00f,inset -0px -1px 4px 2px #000;outline:4px solid #0ff;font-size:.8rem;background:#05f8;line-height:0}.clock .sphere-big{width:442px;height:412px;position:relative;bottom:20px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding-block:.75rem;border-radius:100%;border:4px solid #000c;background:#55f5;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:inset 5px 5px 6px 3px #fff7,inset -5px -5px 8px 4px #000;cursor:pointer;overflow:hidden}.clock .sphere-big .break{width:100%}.clock .sphere-big .break :first-child{font-size:2.75rem;line-height:1.2;color:#0ff;font-family:fantasy;-webkit-text-stroke:black 2px}.clock .sphere-big .break :last-child{color:purple;font-size:1.2rem;font-family:monospace;-webkit-text-stroke:black 1px}.clock .sphere-big .timer{width:100%}.clock .sphere-big .timer :first-child{line-height:0;font-size:2rem;font-family:Arial;letter-spacing:2px;color:#aff;text-shadow:0px 0px 4px cyan}.clock .sphere-big .timer :last-child{line-height:1.2;font-size:clamp(5rem,10vw,7rem);color:#000;-webkit-text-stroke:#0ff 2px;font-family:monospace}.clock .sphere-big .timer .break-class-label{color:#0f0;text-shadow:0 2px 4px black}.clock .sphere-big .timer .break-class{color:#000;-webkit-text-stroke:#0f0 2px}.clock .sphere-big .session{width:100%}.clock .sphere-big .session :first-child{line-height:1;color:purple;font-size:1.2rem;font-family:monospace;-webkit-text-stroke:black 1px}.clock .sphere-big .session :last-child{font-size:2.75rem;color:#0ff;font-family:fantasy;-webkit-text-stroke:black 2px}.clock .buttons-session{width:100%;height:120px;margin:0 auto;padding:0;border-radius:50px;position:relative;bottom:46px;column-gap:344px;display:flex;justify-content:center;align-items:center}.clock .buttons-session .buttons-bottom{width:70px;height:68px;color:#000;font-size:1rem;font-weight:700;text-shadow:0px 0px 4px black;cursor:pointer;border-radius:50%;border:4px solid #0005;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#05f4;box-shadow:0 0 10px 5px #0ff5,0 0 16px 8px #00f5,0 0 20px 8px #0ffa,0 0 30px 10px #00fa,inset 1px 2px 4px #fffa,inset -1px -2px 4px 2px #000;outline:4px solid #0ff1;transition:box-shadow .3s ease,outline .1s ease,background .2s ease}.clock .buttons-session .buttons-bottom:hover{box-shadow:0 0 12px 5px #0ff5,0 0 18px 8px #00f5,0 0 25px 10px #0ffa,0 0 40px 12px #00fa,inset 1px 2px 4px #fffa,inset -1px -2px 4px 2px #000;outline:3px solid #0ff}.clock .buttons-session .buttons-bottom:active{box-shadow:0 0 15px 5px #0ff,0 0 20px 8px #00f,0 0 40px 10px #0ff,0 0 55px 15px #00f,inset 0 0 2px #fff5,inset 0 0 4px 2px #000;outline:4px solid #0ff;font-size:.9rem;background:#04f6}footer.footer{position:absolute;bottom:2px;left:50%;transform:translate(-50%);width:100%;text-align:center;font-size:clamp(.4rem,2vw,1rem);color:#fff;font-weight:600}footer.footer a:first-child{color:#dc143c;font-style:italic;text-decoration:none}footer.footer a:first-child:hover{text-shadow:0 0 2px crimson}footer.footer a:last-child{text-decoration:none;color:#625ad8}footer.footer a:last-child:hover{text-shadow:0 0 1px white}