:root {
  color-scheme:dark;
  --background:#191b1a;
  --text:#f5f0e8;
  --muted:#b4b8b0;
  --line:#434740;
  --focus:#e9a17e;
  --rest:#98bba2;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--background);
  color:var(--text);
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
}
button,input {
  font:inherit;
}
button,a,input,summary {
  -webkit-tap-highlight-color:transparent;
}
button {
  cursor:pointer;
}
button:disabled {
  cursor:wait;
  opacity:.6;
}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible {
  outline:2px solid var(--focus);
  outline-offset:5px;
}
::selection {
  background:var(--text);
  color:var(--background);
}
[hidden] {
  display:none!important;
}
.app {
  min-height:100svh;
  display:grid;
  grid-template-rows:auto 1fr;
  padding:24px clamp(20px,4vw,64px);
  padding-top:max(24px,env(safe-area-inset-top));
  padding-bottom:max(24px,env(safe-area-inset-bottom));
}
.toolbar,.tools,.brand {
  display:flex;
  align-items:center;
}
.toolbar {
  justify-content:space-between;
  gap:16px;
}
.brand {
  color:var(--text);
  text-decoration:none;
  gap:12px;
  font-size:15px;
  letter-spacing:.01em;
}
.brand img {
  filter:invert(93%) sepia(12%) saturate(251%);
  flex:none;
}
.tools {
  gap:12px;
}
.tool {
  min-width:48px;
  min-height:48px;
  padding:12px;
  border:0;
  background:transparent;
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:8px;
}
.tool svg {
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.tool:hover {
  color:var(--text);
  background:#252825;
}
.tool-label {
  font-size:14px;
}
.timer {
  align-self:center;
  text-align:center;
  padding:56px 0;
  min-width:0;
}
h1 {
  font-size:clamp(19px,2.3vw,26px);
  line-height:1.4;
  font-weight:400;
  margin:0 0 8px;
  color:var(--muted);
}
.countdown {
  font-size:clamp(72px,17vw,240px);
  line-height:1.12;
  font-weight:300;
  letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
  margin:0 0 36px;
  white-space:nowrap;
}
.actions {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  min-height:112px;
}
.primary {
  background:var(--text);
  color:var(--background);
  border:1px solid var(--text);
  border-radius:8px;
  min-height:52px;
  min-width:192px;
  padding:14px 28px;
  font-size:17px;
  font-weight:500;
}
.primary:hover {
  background:#dfdbd1;
  border-color:#dfdbd1;
}
.primary:active {
  transform:translateY(1px);
}
.stop {
  color:var(--muted);
  background:transparent;
  border:0;
  border-radius:8px;
  min-height:48px;
  padding:12px 28px;
  font-size:15px;
}
.stop:hover {
  color:var(--text);
  background:#252825;
}
.cycle {
  font-size:14px;
  line-height:1.6;
  color:var(--muted);
  margin:20px 0 0;
}
.notice {
  font-size:14px;
  line-height:1.6;
  color:var(--focus);
  max-width:48ch;
  margin:16px auto 0;
}
body[data-phase="shortRest"] h1,body[data-phase="longRest"] h1 {
  color:var(--rest);
}
body[data-phase="focus"] h1 {
  color:var(--focus);
}
body.desk .brand {
  visibility:hidden;
}
body.desk .tool-label {
  display:none;
}
body.desk .countdown {
  font-size:clamp(72px,22vw,340px);
}
body.desk .timer {
  padding:24px 0;
}
dialog {
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--background);
  color:var(--text);
  padding:28px;
  width:min(480px,calc(100% - 32px));
  max-height:calc(100svh - 32px);
  overflow:auto;
  scrollbar-color:var(--line) var(--background);
}
dialog::backdrop {
  background:#0009;
}
.sheet-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
h2 {
  font-size:24px;
  line-height:1.3;
  font-weight:500;
  margin:0;
}
.sheet-header .tool {
  margin-right:-12px;
}
.sheet-intro {
  color:var(--muted);
  margin:6px 0 28px;
  font-size:15px;
}
.duration-fields {
  display:grid;
  gap:16px;
}
.duration-fields label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  font-size:16px;
}
.duration-input {
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--muted);
  font-size:14px;
}
.duration-input input {
  width:86px;
  min-height:48px;
  background:#252825;
  border:1px solid var(--line);
  border-radius:6px;
  color:var(--text);
  padding:10px;
  font-size:17px;
  font-variant-numeric:tabular-nums;
  caret-color:var(--focus);
}
.help,details p {
  font-size:13px;
  line-height:1.7;
  color:var(--muted);
}
.help {
  margin:20px 0 24px;
}
.awake {
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:14px;
  line-height:1.5;
  padding:12px 0;
}
.awake input {
  width:20px;
  height:20px;
  margin:0;
  accent-color:var(--text);
  flex:none;
}
.awake small {
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-top:4px;
}
.save {
  width:100%;
  margin:24px 0;
}
.error {
  font-size:14px;
  color:var(--focus);
  line-height:1.5;
}
details {
  border-top:1px solid var(--line);
  padding-top:12px;
}
summary {
  cursor:pointer;
  min-height:44px;
  padding:12px 0;
  font-size:14px;
}
a {
  color:var(--text);
  text-underline-offset:4px;
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
.noscript {
  position:fixed;
  bottom:0;
  background:var(--background);
  color:var(--focus);
  padding:20px;
  width:100%;
  text-align:center;
}
@media(max-width:600px) {
  .app {
    padding-inline:20px;
  }
  .brand span,.tool-label {
    display:none;
  }
  .tools {
    gap:4px;
  }
  .timer {
    padding:48px 0;
  }
  .countdown {
    font-size:clamp(64px,19vw,116px);
    margin-bottom:32px;
  }
  .cycle {
    max-width:28ch;
    margin-inline:auto;
  }
  dialog {
    padding:24px;
  }
}
@media(max-height:520px) and (min-width:600px) {
  .app {
    padding-top:12px;
    padding-bottom:12px;
  }
  .timer,body.desk .timer {
    padding:8px 0;
  }
  h1 {
    font-size:18px;
    margin:0;
  }
  .countdown,body.desk .countdown {
    font-size:clamp(70px,24vh,160px);
    margin-bottom:12px;
  }
  .actions {
    flex-direction:row;
    justify-content:center;
    min-height:52px;
    gap:16px;
  }
  .cycle {
    margin-top:12px;
  }
  .toolbar {
    height:48px;
  }
}
@media(prefers-reduced-motion:no-preference) {
  dialog[open] {
    animation:sheet-enter .18s ease-out;
  }
  @keyframes sheet-enter {
    from {
      transform:translateY(12px);
      opacity:.8;
    }
    to {
      transform:translateY(0);
      opacity:1;
    }
  }
}