/* Script timer free-bee (script-timer.html) */
.st-hero { padding: 72px 0 64px; position: relative; overflow: hidden; }
.st-hero h1 { max-width: 13ch; }
.st-hero .lead { max-width: 560px; }
.st-rip { position: absolute; right: 8%; bottom: 22%; transform: rotate(-4deg); }

.st-tool-wrap { padding-top: 56px; }
.st-tool { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.st-label { display: block; font-family: var(--font-head); font-weight: 700; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 10px; }
.st-input textarea {
  width: 100%; box-sizing: border-box; min-height: 340px; resize: vertical;
  font: 400 17px/1.6 var(--font-body); color: var(--ink);
  background: #fff; border: 2px solid var(--ink); border-radius: 18px; padding: 20px 22px;
}
.st-input textarea:focus { outline: 3px solid var(--cyan); outline-offset: 2px; }
.st-pace { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; align-items: center; }
.st-pace .st-label { width: 100%; margin-bottom: 2px; }
.st-pace label { cursor: pointer; }
.st-pace input { position: absolute; opacity: 0; pointer-events: none; }
.st-pace label span {
  display: block; padding: 10px 16px; border: 2px solid var(--ink); border-radius: 999px; background: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: 15px; transition: background-color .15s ease;
}
.st-pace label span small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 12px; color: #55524c; }
.st-pace label:hover span { background: #f1eee6; }
.st-pace input:checked + span { background: var(--lavender); }
.st-pace input:focus-visible + span { outline: 3px solid var(--cyan); outline-offset: 2px; }

.st-result {
  position: sticky; top: 24px; background: var(--ink); color: #fff; border-radius: 22px; padding: 28px 28px 30px;
}
.st-result .st-label { color: var(--cyan); }
.st-time { font-family: var(--font-head); font-weight: 900; font-size: clamp(64px, 8vw, 104px); line-height: .9; letter-spacing: -.04em; margin: 4px 0 10px; }
.st-words { font-size: 16px; color: #d8d4cc; margin: 0 0 26px; }
.st-words strong { color: #fff; }
.st-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.st-chips button {
  font-family: var(--font-head); font-weight: 700; font-size: 14px; padding: 8px 14px; border-radius: 999px;
  border: 2px solid #fff; background: transparent; color: #fff; cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.st-chips button:hover { background: rgba(255,255,255,.12); }
.st-chips button.on { background: var(--cyan); border-color: var(--cyan); color: var(--ink); }
.st-bar { height: 12px; border-radius: 999px; background: #34322f; overflow: hidden; }
.st-bar span { display: block; height: 100%; width: 0; background: var(--lavender); border-radius: 999px; transition: width .2s ease, background-color .2s ease; }
.st-bar span.good { background: var(--cyan); }
.st-bar span.over { background: var(--coral); }
.st-verdict { margin: 14px 0 0; font-size: 16px; line-height: 1.45; }

.st-ref-wrap { padding-top: 0; }
.st-ref { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 40px; align-items: center; }
.st-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 2px solid var(--ink); border-radius: 18px; overflow: hidden; font-size: 16px; }
.st-table th { background: var(--ink); color: #fff; text-align: left; font-family: var(--font-head); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; padding: 14px 18px; }
.st-table td { padding: 14px 18px; border-top: 1px solid #e4dfd5; }
.st-table td:nth-child(2) { font-family: var(--font-head); font-weight: 900; white-space: nowrap; }

.st-tip-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 28px; }
.st-tip { background: #fff; border: 2px solid var(--ink); border-radius: 18px; padding: 26px 24px; }
.st-tip h3 { margin: 14px 0 8px; }
.st-tip p { margin: 0; line-height: 1.5; }
.st-num { display: inline-block; width: 46px; height: 46px; line-height: 42px; text-align: center; border-radius: 50%; border: 2px solid var(--ink); background: var(--cyan); font-family: var(--font-head); font-weight: 900; font-size: 22px; }

.st-cta { color: #fff; }
.st-cta-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.st-cta .lead { color: #d8d4cc; }
.st-cta-btns { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.st-light { color: #fff; border-color: #fff; }

@media (max-width: 900px) {
  .st-tool, .st-ref, .st-cta-grid { grid-template-columns: 1fr; }
  .st-result { position: static; }
  .st-tip-grid { grid-template-columns: 1fr; }
  .st-rip { position: static; display: inline-block; margin-top: 24px; }
  .st-input textarea { min-height: 260px; }
}