.tn-rp-page {
  width: min(1180px, calc(100vw - 32px));
  margin: 0 auto;
  color: #1a1208;
  -webkit-text-fill-color: currentColor;
}

.tn-rp-tool {
  --tn-rp-bg: #faf6ee;
  --tn-rp-ink: #1a1208;
  --tn-rp-muted: #5a4a30;
  --tn-rp-line: #b8a888;
  --tn-rp-soft: #ddd4be;
  --tn-rp-accent: #c44a00;
  --tn-rp-surface: rgba(255, 252, 244, .74);
  --tn-rp-surface-quiet: rgba(255, 252, 244, .42);
  --tn-rp-secondary-bg: #ede6d4;
  --tn-rp-secondary-hover: #dfd4bb;
  --tn-rp-primary-bg: #1a1208;
  --tn-rp-primary-hover: #c44a00;
  --tn-rp-primary-text: #faf6ee;
  margin: 0 auto 18px;
  border: 1px solid var(--tn-rp-line);
  border-top: 2px solid var(--tn-rp-ink);
  border-radius: 0;
  background: var(--tn-rp-bg);
  color: var(--tn-rp-ink);
  -webkit-text-fill-color: var(--tn-rp-ink);
}

.tn-rp-tool * {
  box-sizing: border-box;
}

.tn-rp-mode-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 16px;
  border-bottom: 1px solid var(--tn-rp-line);
}

.tn-rp-mode-nav button {
  display: flex;
  min-width: 0;
  min-height: 82px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--tn-rp-line);
  border-radius: 0;
  background: var(--tn-rp-surface-quiet);
  color: var(--tn-rp-ink);
  -webkit-text-fill-color: var(--tn-rp-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.tn-rp-mode-nav button strong {
  font-size: 15px;
  line-height: 1.2;
}

.tn-rp-mode-nav button span {
  color: var(--tn-rp-muted);
  -webkit-text-fill-color: var(--tn-rp-muted);
  font-size: 12px;
  line-height: 1.45;
}

.tn-rp-mode-nav button:hover {
  border-color: var(--tn-rp-accent);
  background: var(--tn-rp-surface);
}

.tn-rp-mode-nav button[aria-selected="true"] {
  border-color: var(--tn-rp-accent);
  background: var(--tn-rp-secondary-bg);
  box-shadow: inset 0 -3px 0 var(--tn-rp-accent);
}

.tn-rp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 460px;
}

.tn-rp-input,
.tn-rp-result {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 16px;
  padding: 22px;
}

.tn-rp-input {
  border-right: 1px solid var(--tn-rp-line);
}

.tn-rp-pane-label,
.tn-rp-main-label,
.tn-rp-presets > span {
  margin: 0;
  color: var(--tn-rp-muted);
  -webkit-text-fill-color: var(--tn-rp-muted);
  font: 700 12px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .06em;
}

.tn-rp-mode-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tn-rp-mode-panel[hidden] {
  display: none;
}

.tn-rp-field-group {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  padding: 13px;
  border: 1px solid var(--tn-rp-line);
  background: var(--tn-rp-surface);
}

.tn-rp-field-group legend {
  padding: 0 5px;
  color: var(--tn-rp-ink);
  -webkit-text-fill-color: var(--tn-rp-ink);
  font-size: 15px;
  font-weight: 700;
}

.tn-rp-field-group p {
  margin: 0;
  color: var(--tn-rp-muted);
  -webkit-text-fill-color: var(--tn-rp-muted);
  font-size: 12px;
  line-height: 1.5;
}

.tn-rp-field,
.tn-rp-time,
.tn-rp-pace {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--tn-rp-ink);
  font-size: 14px;
  font-weight: 700;
}

.tn-rp-field-label {
  display: block;
}

.tn-rp-two,
.tn-rp-time-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.tn-rp-time-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tn-rp-pace .tn-rp-time-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tn-rp-control {
  position: relative;
  display: flex;
  align-items: center;
  height: 38px;
  border: 1px solid var(--tn-rp-line);
  background: var(--tn-rp-bg);
}

.tn-rp-control input,
.tn-rp-control select {
  width: 100%;
  height: 36px;
  min-width: 0;
  padding: 0 10px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--tn-rp-ink);
  -webkit-text-fill-color: var(--tn-rp-ink);
  font: 700 14px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.tn-rp-control input::placeholder,
.tn-rp-control input::-webkit-input-placeholder {
  color: var(--tn-rp-muted);
  opacity: .55;
  -webkit-text-fill-color: var(--tn-rp-muted);
}

.tn-rp-control--suffix input {
  padding-right: 48px;
}

.tn-rp-control b {
  position: absolute;
  right: 10px;
  color: var(--tn-rp-muted);
  -webkit-text-fill-color: var(--tn-rp-muted);
  font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  pointer-events: none;
}

.tn-rp-control select {
  appearance: none;
  padding-right: 30px;
}

.tn-rp-control--select::after {
  content: '⌄';
  position: absolute;
  right: 10px;
  color: var(--tn-rp-muted);
  font-size: 16px;
  pointer-events: none;
}

.tn-rp-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.tn-rp-presets {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.tn-rp-preset,
.tn-rp-actions button {
  height: 36px;
  border: 1px solid var(--tn-rp-line);
  border-radius: 0;
  background: var(--tn-rp-secondary-bg);
  color: var(--tn-rp-ink);
  -webkit-text-fill-color: var(--tn-rp-ink);
  font: 700 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: center;
}

.tn-rp-preset {
  min-width: 52px;
}

.tn-rp-preset:hover:not(:disabled),
.tn-rp-actions .tn-rp-reset:hover:not(:disabled) {
  border-color: var(--tn-rp-accent);
  background: var(--tn-rp-secondary-hover);
}

.tn-rp-preset.is-active {
  border-color: var(--tn-rp-accent);
  background: var(--tn-rp-accent);
  color: var(--tn-rp-primary-text);
  -webkit-text-fill-color: var(--tn-rp-primary-text);
}

.tn-rp-status,
.tn-rp-disclaimer {
  margin: 0;
  padding: 10px;
  border: 1px solid var(--tn-rp-line);
  background: var(--tn-rp-surface);
  color: var(--tn-rp-muted);
  -webkit-text-fill-color: var(--tn-rp-muted);
  font-size: 13px;
  line-height: 1.5;
}

.tn-rp-main {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 2px 0;
}

.tn-rp-main strong {
  font: 700 28px/1.1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: -.04em;
}

.tn-rp-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.tn-rp-metrics div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--tn-rp-line);
  background: var(--tn-rp-surface);
}

.tn-rp-metrics span,
.tn-rp-projection small {
  color: var(--tn-rp-muted);
  -webkit-text-fill-color: var(--tn-rp-muted);
  font-size: 11px;
}

.tn-rp-metrics b {
  overflow: hidden;
  font: 700 13px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tn-rp-projection {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--tn-rp-line);
  background: var(--tn-rp-surface);
}

.tn-rp-projection-head,
.tn-rp-projection-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 68px;
  align-items: center;
  gap: 9px;
}

.tn-rp-projection-head {
  grid-template-columns: 1fr auto;
}

.tn-rp-projection-head span {
  font-size: 13px;
  font-weight: 700;
}

.tn-rp-projection-row > span,
.tn-rp-projection-row > b {
  font: 700 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.tn-rp-projection-row > b {
  text-align: right;
}

.tn-rp-projection-row i {
  display: block;
  height: 7px;
  background: var(--tn-rp-soft);
}

.tn-rp-projection-row em {
  display: block;
  width: 0;
  height: 100%;
  background: var(--tn-rp-accent);
  transition: width .18s ease;
}

.tn-rp-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.tn-rp-actions .tn-rp-copy {
  border-color: var(--tn-rp-primary-bg);
  background: var(--tn-rp-primary-bg);
  color: var(--tn-rp-primary-text);
  -webkit-text-fill-color: var(--tn-rp-primary-text);
}

.tn-rp-actions .tn-rp-copy:hover:not(:disabled) {
  border-color: var(--tn-rp-primary-hover);
  background: var(--tn-rp-primary-hover);
}

.tn-rp-actions button:disabled {
  cursor: not-allowed;
  opacity: .48;
}

.tn-rp-tool button {
  cursor: pointer;
}

.tn-rp-tool button:focus-visible {
  outline: 2px solid var(--tn-rp-accent);
  outline-offset: 2px;
}

.tn-rp-control:has(input:focus-visible),
.tn-rp-control:has(select:focus-visible) {
  outline: 2px solid var(--tn-rp-accent);
  outline-offset: -1px;
}

.tn-rp-tool ul,
.tn-rp-tool ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tn-rp-page .tn-article-panel ul.tn-article-list {
  margin: 10px 0 0;
  padding-left: 18px;
  list-style: disc;
}

.tn-rp-page .tn-article-panel ol.tn-article-list {
  margin: 10px 0 0;
  padding-left: 18px;
  list-style: decimal;
}

.tn-rp-page .tn-article-panel li + li {
  margin-top: 6px;
}

@media (prefers-color-scheme: dark) {
  .tn-rp-tool {
    --tn-rp-bg: #241d12;
    --tn-rp-ink: #efe6d2;
    --tn-rp-muted: #c3b492;
    --tn-rp-line: #6f6047;
    --tn-rp-soft: #574a37;
    --tn-rp-accent: #e8823f;
    --tn-rp-surface: #322a1a;
    --tn-rp-surface-quiet: #2c2517;
    --tn-rp-secondary-bg: #33291a;
    --tn-rp-secondary-hover: #453720;
    --tn-rp-primary-bg: #e8823f;
    --tn-rp-primary-hover: #f2a061;
    --tn-rp-primary-text: #241206;
  }
}

.tn-rp-page-body.dark .tn-rp-tool,
.tn-rp-page-body[data-theme="dark"] .tn-rp-tool,
body:is([data-scheme="dark"], [data-scheme="inverse"], [data-scheme="auto"][data-d="dark"], [data-scheme="auto"][data-l="dark"]):not([data-scheme="light"]) .tn-rp-tool,
html[data-scheme="dark"] body:not([data-scheme="light"]) .tn-rp-tool,
html[data-scheme="inverse"] body:not([data-scheme="light"]) .tn-rp-tool {
  --tn-rp-bg: #241d12;
  --tn-rp-ink: #efe6d2;
  --tn-rp-muted: #c3b492;
  --tn-rp-line: #6f6047;
  --tn-rp-soft: #574a37;
  --tn-rp-accent: #e8823f;
  --tn-rp-surface: #322a1a;
  --tn-rp-surface-quiet: #2c2517;
  --tn-rp-secondary-bg: #33291a;
  --tn-rp-secondary-hover: #453720;
  --tn-rp-primary-bg: #e8823f;
  --tn-rp-primary-hover: #f2a061;
  --tn-rp-primary-text: #241206;
}

@media (prefers-color-scheme: dark) {
  body[data-scheme="auto"]:not([data-scheme="light"]) .tn-rp-tool {
    --tn-rp-bg: #241d12;
    --tn-rp-ink: #efe6d2;
    --tn-rp-muted: #c3b492;
    --tn-rp-line: #6f6047;
    --tn-rp-soft: #574a37;
    --tn-rp-accent: #e8823f;
    --tn-rp-surface: #322a1a;
    --tn-rp-surface-quiet: #2c2517;
    --tn-rp-secondary-bg: #33291a;
    --tn-rp-secondary-hover: #453720;
    --tn-rp-primary-bg: #e8823f;
    --tn-rp-primary-hover: #f2a061;
    --tn-rp-primary-text: #241206;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tn-rp-projection-row em {
    transition: none;
  }
}

@media (max-width: 700px) {
  .tn-rp-page {
    width: min(calc(100% - 24px), 1180px);
  }

  .tn-rp-mode-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
  }

  .tn-rp-mode-nav button {
    min-height: 88px;
    padding: 10px;
  }

  .tn-rp-grid {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .tn-rp-input {
    border-right: 0;
    border-bottom: 1px solid var(--tn-rp-line);
  }

  .tn-rp-input,
  .tn-rp-result {
    gap: 14px;
    padding: 16px;
  }

  .tn-rp-field-group {
    padding: 12px;
  }


  .tn-rp-time-row {
    gap: 6px;
  }

  .tn-rp-main strong {
    font-size: 25px;
  }

  .tn-rp-metrics {
    gap: 8px;
  }

  .tn-rp-metrics div {
    padding: 9px 7px;
  }

  .tn-rp-control input,
  .tn-rp-control select {
    font-size: 13px;
  }
}

@media (max-width: 380px) {
  .tn-rp-page {
    width: min(calc(100% - 16px), 1180px);
  }


  .tn-rp-input,
  .tn-rp-result {
    padding: 14px;
  }

}