.tool-page {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: var(--page-gap, clamp(18px, 2vw, 24px));
  height: 100vh;
  padding: clamp(16px, 2.8vw, 34px);
}

.tool-head {
  align-items: end;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

.tool-head h1 {
  font-size: clamp(48px, 8vw, 88px);
}

.tool-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.tool-actions button {
  min-height: 2.2rem;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--fg);
  cursor: pointer;
  padding: 0.42rem 0.7rem;
}

.tool-actions button:hover,
.tool-actions button[aria-pressed="true"] {
  border-color: var(--line-strong);
  color: var(--accent);
}

.tool-workbench {
  border-top: 1px solid var(--line);
  min-height: 0;
  position: relative;
}

.tool-canvas {
  display: block;
  height: 100%;
  width: 100%;
}

.tool-readout {
  bottom: 12px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.82rem;
  left: 0;
  position: absolute;
}

html:has(.tool-page),
body:has(.tool-page) {
  overflow: hidden;
}

@media (max-width: 720px) {
  html:has(.tool-page),
  body:has(.tool-page) {
    overflow: auto;
  }

  .tool-page {
    min-height: 100vh;
    height: auto;
  }

  .tool-head {
    align-items: start;
    flex-direction: column;
  }

  .tool-actions {
    justify-content: flex-start;
  }

  .tool-workbench {
    height: 70vh;
  }
}