:root{color-scheme:light;--paper:#edf2f7;--ink:#16314b;--blue:#245ca8;--mist:#b7cfde;--sun:#e7a869;--line:#cedce6;font-family:Optima,Candara,Calibri,"Segoe UI",sans-serif;font-size:18px;color:var(--ink);background:var(--paper)}*{box-sizing:border-box}body{margin:0;min-height:100vh}header,main,footer{max-width:1240px;margin:auto}header{display:flex;align-items:center;justify-content:space-between;padding:36px 42px}.brand{display:flex;align-items:center;gap:11px;color:inherit;font-size:25px;font-weight:650;text-decoration:none}.mark{height:22px;width:22px;border-radius:50%;background:var(--blue);box-shadow:9px 0 0 -2px var(--sun);margin-right:9px}.small{font-size:16px;color:#486278}main{padding:20px 42px 38px;display:grid;grid-template-columns:1.12fr 1fr;gap:90px;align-items:center}.workspace{display:flex;flex-direction:column;align-items:center}.task{width:100%}label{display:block;font-size:18px;margin-bottom:13px}input{font:inherit;font-size:24px;font-weight:500;color:var(--ink);width:100%;padding:10px 0 15px;border:0;border-bottom:1px solid #8ea9bd;border-radius:0;background:transparent}input::placeholder{font-size:20px;color:#557085}input:focus-visible{outline:0;border-bottom:3px solid var(--blue);padding-bottom:13px}.clock{position:relative;width:min(100%,340px);aspect-ratio:1;margin:35px 0 25px}.clock svg{width:100%;height:100%;transform:rotate(-90deg)}circle{fill:none;stroke-width:3}.track{stroke:var(--line)}#progress{stroke:var(--blue);stroke-width:5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0}.clock-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column}.clock-label{font-size:17px;color:#486278}output{font-family:ui-rounded,"Arial Rounded MT Bold",Candara,sans-serif;font-variant-numeric:tabular-nums;font-size:76px;letter-spacing:-5px;line-height:1.35;font-weight:500;margin-right:5px}.clock-face p{font-size:15px;color:#486278;margin:3px 0}.controls{display:flex;gap:14px;justify-content:center;width:100%}button{font:inherit;cursor:pointer;min-height:48px;border-radius:100px;padding:12px 21px;border:1px solid transparent;touch-action:manipulation}button:focus-visible,a:focus-visible,textarea:focus-visible{outline:3px solid var(--blue);outline-offset:4px}.primary{background:var(--blue);color:white;min-width:168px}.primary:hover{background:#174980}.quiet{background:transparent;color:var(--ink);border-color:#a9bdcb}.quiet:hover:not(:disabled){background:#dfe8f0}button:disabled{opacity:.5;cursor:default}.timer-note{max-width:340px;color:#557085;text-align:center;font-size:14px;line-height:1.5;margin:19px 0 0}.notes{background:#fff;padding:34px 31px 20px;border-radius:5px 36px 5px 5px;box-shadow:0 10px 38px #16314b0b;min-width:0}.notes-heading{display:flex;align-items:flex-start;gap:14px}h1{font-size:35px;font-weight:500;line-height:1.16;max-width:300px;letter-spacing:-.7px;margin:0}.asterisk{font-family:Georgia,serif;font-size:64px;line-height:.9;color:#bd6a27}.notes p{font-size:17px;line-height:1.55;color:#486278;margin:20px 0}textarea{resize:vertical;width:100%;min-height:230px;max-height:600px;padding:12px 0;border:0;border-top:1px solid #dbe4eb;background:repeating-linear-gradient(transparent,transparent 34px,#edf2f7 34px,#edf2f7 35px);font:inherit;font-size:17px;line-height:35px;color:var(--ink);border-radius:0}textarea::placeholder{color:#60778a}.notes-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:17px;border-top:1px solid #dbe4eb;font-size:13px;color:#557085}.text-button{color:var(--blue);font-size:14px;padding:8px 0;min-height:44px;background:none;border-radius:4px;text-decoration:underline;text-underline-offset:4px;white-space:nowrap}footer{padding:12px 42px 28px;color:#557085;font-size:13px;line-height:1.5}.sr-only{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}@media(max-width:800px){header{padding:24px}.small{display:none}main{display:flex;flex-direction:column;align-items:stretch;gap:32px;padding:12px 24px 30px}.clock{width:290px;margin:30px 0 21px}output{font-size:68px}.task input{font-size:22px}.task input::placeholder{font-size:17px}.notes{padding:26px 24px 16px}.notes h1{font-size:31px;max-width:270px}.notes textarea{min-height:190px}footer{padding:5px 24px 25px}.controls{gap:10px}button{font-size:16px;padding:12px 17px}.primary{min-width:160px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}