:root{font-family:system-ui,"Yu Gothic",sans-serif;color:#263f39;background:#f6f5ee;--green:#275f50;--line:#dce4d9}*{box-sizing:border-box}body{margin:0}header,main,footer{max-width:1140px;margin:auto}header{display:flex;justify-content:space-between;padding:26px 24px;font-size:13px}a{color:var(--green)}header span{background:#e4ecda;padding:5px 12px;border-radius:20px}main{padding:24px}.intro{margin:14px 0 35px}.eyebrow{font-size:11px;letter-spacing:.2em;color:#668576}h1{font-size:38px;margin:14px 0}h1 span{display:block;font-size:17px;font-weight:400;margin-top:12px}.intro>p:last-child{line-height:1.8;color:#6a7b72}.layout{display:grid;grid-template-columns:1.15fr 1fr;gap:24px}.panel{background:#fffef8;border:1px solid var(--line);padding:28px;border-radius:22px;box-shadow:0 8px 25px #334e3810}aside{display:grid;gap:20px}.timer{text-align:center}.tabs{display:flex;background:#eef2e9;border-radius:30px;padding:4px;max-width:250px;margin:0 auto 26px}.tabs button{flex:1;border:0;background:none}.tabs button[aria-pressed=true]{background:white;box-shadow:0 2px 5px #0001}.dial{border:10px solid #e4ebdc;border-top-color:#759b74;border-radius:50%;width:270px;height:270px;margin:25px auto;display:flex;flex-direction:column;justify-content:center}#clock{font-size:61px;font-weight:300;letter-spacing:-.04em;font-variant-numeric:tabular-nums}.dial small{font-size:11px;margin-top:15px}button{font:inherit;color:var(--green);border:1px solid var(--line);border-radius:12px;padding:11px 17px;background:white;cursor:pointer}button:hover{background:#edf2e6}button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #c28a37;outline-offset:3px}.primary{background:var(--green);color:white;min-width:150px}.primary:hover{background:#1b483c}.actions{display:flex;justify-content:center;gap:10px}#status{min-height:23px;font-size:13px;color:#596b48}.sound{font-size:13px}details{margin-top:24px;border-top:1px solid var(--line);padding:18px 0;text-align:left}summary{cursor:pointer;font-size:14px}#settings{display:flex;gap:10px;flex-wrap:wrap;margin-top:15px}#settings label{font-size:12px;flex:1}input{font:inherit;padding:12px;border:1px solid var(--line);border-radius:9px;background:white;min-width:0}input[type=number]{width:100%;margin-top:5px}input[type=checkbox]{accent-color:var(--green)}.link{background:none;border:0;font-size:12px;text-decoration:underline}h2{font-size:18px;margin:0 0 18px}.heading{display:flex;justify-content:space-between;align-items:baseline}.heading span{font-size:12px}.muted{color:#7b8579;font-size:12px;line-height:1.7}#add{display:flex;gap:8px}#task{flex:1}.task{display:flex;align-items:center;gap:8px;margin-top:12px}.task .name{flex:1;text-align:left;border-color:transparent;background:transparent;overflow-wrap:anywhere;padding:7px}.task.selected{background:#edf2e6;border-radius:10px}.task.done .name{text-decoration:line-through;color:#8a9489}.delete{font-size:12px;padding:6px}.numbers{display:flex;gap:50px;margin:20px 0}.numbers strong{display:block;font-size:38px;font-weight:400}.numbers span{font-size:11px;color:#758071}#history{font-size:12px;line-height:2;margin:18px 0}.note{margin:35px 0;padding:22px;border-left:3px solid #9bb08d;font-size:13px;line-height:1.9;color:#6c786b}.note h2{font-size:15px;color:#3d5545}footer{font-size:12px;padding:25px;color:#71806d}@media(max-width:740px){.layout{grid-template-columns:1fr}main{padding:16px}header{padding:18px 16px;font-size:11px}h1{font-size:30px}.panel{padding:22px}.dial{width:240px;height:240px}#clock{font-size:54px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

/* Clear, consistent tool navigation and beginner instructions. */
body[data-tool="focus"]{background:#f5f7fb;color:#172b43;font-family:"Yu Gothic UI","Meiryo",system-ui,sans-serif;--green:#166851;--line:#d9e1ec}
header.site-header{max-width:none;background:#fff;min-height:82px;border-bottom:1px solid #e1e6ee;display:flex;align-items:center;justify-content:space-between;padding:18px max(24px,calc((100vw - 1120px)/2));gap:16px}
.site-brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:23px;font-weight:800;white-space:nowrap;color:#172b43}
header .brand-mark{display:grid;place-items:center;background:#165f50;color:#fff;width:38px;height:38px;padding:0;border-radius:12px;font-size:24px}
header .site-brand>span:last-child{background:none;padding:0;border-radius:0}.all-tools{font-weight:700;font-size:14px;white-space:nowrap;text-underline-offset:5px}
.panel{background:#fff;border-radius:20px;box-shadow:0 3px 0 #dfe5ee}.intro .eyebrow{font-size:14px;font-weight:700;letter-spacing:0;color:#166851}.intro h1{font-size:clamp(29px,4vw,40px);margin:10px 0 14px}.intro>p:last-of-type{color:#40536b}.quick-steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;counter-reset:step;margin:24px 0 0}.quick-steps li{counter-increment:step;background:#fff;border:1px solid #d9e1ec;border-radius:12px;padding:16px}.quick-steps li strong{font-size:14px;display:block}.quick-steps li strong:before{content:counter(step);display:inline-grid;place-items:center;background:#e6f5ee;color:#166851;border-radius:50%;width:25px;height:25px;margin-right:8px}.quick-steps li span{display:block;font-size:12px;color:#40536b;line-height:1.7;margin-top:8px}.note{color:#40536b}.muted{color:#526477}.primary{font-weight:700}.dial{border-color:#e4f0eb;border-top-color:#3a886a}
@media(max-width:580px){header.site-header{padding:15px 18px;min-height:70px}.site-brand{font-size:19px;gap:7px}header .brand-mark{width:30px;height:30px;font-size:20px}.all-tools{font-size:12px}.quick-steps{grid-template-columns:1fr;gap:8px}.quick-steps li{padding:12px 15px}.quick-steps li span{margin-top:4px}}