@import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";:root{--background-clr: #20232a;--panel-bg: #262a33;--btn-clr: #4a5a7a;--btn2-clr: #6b7a99;--btn-hover: #5c6a8a;--clr-100: #b3c2d6;--clr-200: #a0aabe;--input-bg: #23262e;--input-border: #3a405a;--shadow: 0 8px 32px 0 rgba(40, 48, 80, .18)}*{margin:0;padding:0;box-sizing:border-box;font-family:Inter,sans-serif}html{scroll-behavior:smooth}body,#root{width:100vw;min-height:100vh;display:flex;justify-content:center;align-items:center;background:linear-gradient(135deg,#23262e,#20232a);color:#e6eaf1}h1{text-align:center;font-size:2.2rem;font-weight:700;color:var(--clr-100);margin-bottom:10px;letter-spacing:1px}h2{color:var(--clr-100);font-size:2.5rem;letter-spacing:2px;font-weight:700;margin-bottom:10px;text-shadow:0 2px 8px #0002}button{padding:12px 32px;background:linear-gradient(90deg,var(--btn-clr),var(--btn2-clr));color:#fff;border:none;border-radius:18px;cursor:pointer;font-size:1.1rem;font-weight:600;opacity:.92;box-shadow:0 2px 8px #0002;transition:background .2s,opacity .2s,transform .1s;outline:none}button:hover:not(:disabled){background:linear-gradient(90deg,var(--btn-hover),var(--btn2-clr));opacity:1;transform:translateY(-2px) scale(1.03)}button:disabled{opacity:.5;background:#23283a;color:#b0b8c1;cursor:not-allowed}.buttons-wrapper{width:100%;display:flex;justify-content:space-evenly;gap:18px;margin-top:10px}#stopwatch,#timer{width:min(350px,95vw);min-width:300px;min-height:240px;background:var(--panel-bg);border-radius:24px;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:32px 24px 24px;margin:0 auto;gap:18px}#column-wrapper{width:100%;max-width:350px;height:120px;display:flex;column-gap:16px;justify-content:center;align-items:flex-end;margin-bottom:10px}#column-wrapper section{height:100px;display:flex}#column-wrapper section:nth-child(odd){width:calc((100% / 3) - 8px);flex-direction:column;align-items:center;justify-content:flex-end}#column-wrapper section:nth-child(odd) label{color:var(--clr-200);font-size:1rem;margin-bottom:6px;font-weight:500}#column-wrapper section:nth-child(odd) input{height:48px;width:100%;background:var(--input-bg);border:2px solid var(--input-border);border-radius:10px;color:#f5f6fa;font-size:2rem;font-weight:700;text-align:center;outline:none;margin-top:6px;box-shadow:0 1px 4px #0001;transition:border .2s}#column-wrapper section:nth-child(odd) input:focus{border:2px solid var(--btn-clr)}#column-wrapper section:nth-child(2n){width:12px;align-items:center;justify-content:center;font-weight:900;font-size:2rem;color:var(--clr-200)}#column-wrapper section:nth-child(2n) span{margin-bottom:18px}#menu{display:flex;flex-direction:column;align-items:center;justify-content:center;row-gap:24px;padding:32px 24px;box-sizing:content-box;min-width:320px;width:max(320px,40vw);background:var(--panel-bg);border-radius:28px;box-shadow:var(--shadow);position:relative}#menu .buttons-wrapper{gap:24px}#come-back-button{position:absolute;top:18px;left:18px;font-weight:900;font-size:1.3rem;background:transparent;color:var(--clr-100);border:2px solid var(--clr-100);border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;box-shadow:none;transition:background .2s,color .2s}#come-back-button:hover{background:var(--clr-100);color:var(--panel-bg)}.hidden{display:none!important}
