[data-nautical-slide-rule] {
  --nsr-navy: #082b45;
  --nsr-blue: #0a6286;
  --nsr-sea: #16a6a1;
  --nsr-cream: #f7f3e8;
  display: block;
  max-width: 920px;
  margin: 0 auto;
}

.nsr-card {
  overflow: hidden;
  border: 1px solid #b8cad3;
  border-radius: 18px;
  background: linear-gradient(145deg, #fff, #edf5f7);
  box-shadow: 0 18px 42px rgba(8, 43, 69, .14);
}

.nsr-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px;
  color: #fff;
  background: linear-gradient(120deg, var(--nsr-navy), #0b4867);
}

.nsr-heading p {
  margin: 0 0 4px;
  color: #80e2dc;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
}

.nsr-heading h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(25px, 4vw, 38px);
}

.nsr-heading span { color: #c7dce6; }

.nsr-compass {
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 3px, transparent 4px);
}

.nsr-compass b { font-size: 24px; }
.nsr-compass i { position: absolute; font-size: 10px; font-style: normal; }
.nsr-compass i:first-child { top: 5px; }
.nsr-compass i:last-child { bottom: 5px; }

.nsr-mode {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 18px 22px 0;
}

.nsr-mode button,
.nsr-unit button {
  border: 1px solid #b9ccd5;
  color: var(--nsr-navy);
  background: #fff;
  font-weight: 800;
}

.nsr-mode button { padding: 12px; border-radius: 9px; }
.nsr-mode button.on,
.nsr-unit button.on { border-color: var(--nsr-blue); color: #fff; background: var(--nsr-blue); }
.nsr-prompt { margin: 18px 24px 8px; color: #456170; }
.nsr-form { padding: 0 24px 18px; }
.nsr-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.nsr-fields label > span,
.nsr-unit > span {
  display: block;
  margin-bottom: 7px;
  color: var(--nsr-navy);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.nsr-input {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid #aebfc8;
  border-radius: 10px;
  background: #fff;
}

.nsr-input:focus-within { border-color: var(--nsr-sea); outline: 3px solid rgba(22, 166, 161, .22); }
.nsr-input input { min-width: 0; width: 100%; padding: 14px; border: 0 !important; outline: 0 !important; background: transparent; font-size: 20px; }
.nsr-input em { display: flex; align-items: center; padding: 0 13px; color: #3e5a67; background: #e5eef1; font-size: 12px; font-style: normal; white-space: nowrap; }
.nsr-unit { display: flex; align-items: center; gap: 6px; margin: 6px 0 14px; }
.nsr-unit > span { margin: 0 auto 0 0; }
.nsr-unit button { padding: 8px 13px; border-radius: 999px; }

.nsr-calculate {
  width: 100%;
  margin-top: 18px;
  padding: 14px !important;
  border: 0 !important;
  border-radius: 10px !important;
  color: #fff !important;
  background: linear-gradient(90deg, var(--nsr-sea), var(--nsr-blue)) !important;
  font-size: 16px;
  font-weight: 800;
}

.nsr-error { margin: 0 24px 16px; padding: 11px 13px; border-radius: 8px; color: #8b281c; background: #ffe6e0; }

.nsr-result {
  display: block;
  margin: 0 24px 22px;
  padding: 20px;
  border-left: 5px solid var(--nsr-sea);
  border-radius: 10px;
  background: var(--nsr-cream);
}

.nsr-result small,
.nsr-result span { display: block; }
.nsr-result small { color: #6b756e; font-weight: 800; letter-spacing: .12em; }
.nsr-result strong { display: block; margin: 4px 0; color: var(--nsr-navy); font-size: clamp(25px, 4vw, 36px); }
.nsr-result span { color: #526b73; }

.nsr-time-values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  margin-top: 6px;
}

.nsr-result .nsr-time-value {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  margin: 0;
  padding: 5px 16px;
  font-size: clamp(25px, 4vw, 36px);
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
}

.nsr-result .nsr-time-value + .nsr-time-value { border-left: 1px solid #c9d4cf; }
.nsr-formula { display: flex; justify-content: space-between; gap: 14px; padding: 13px 24px; color: #3d5864; background: #dce9ed; font-size: 12px; }
.nsr-formula b { color: var(--nsr-navy); }

@media (max-width: 640px) {
  .nsr-heading { padding: 20px; }
  .nsr-compass { width: 58px; height: 58px; }
  .nsr-mode { padding: 14px 14px 0; }
  .nsr-prompt { margin: 16px; }
  .nsr-form { padding: 0 16px 16px; }
  .nsr-fields { grid-template-columns: 1fr; }
  .nsr-result { margin: 0 16px 18px; }
  .nsr-result .nsr-time-value { padding: 5px 8px; font-size: clamp(20px, 6vw, 30px); }
  .nsr-formula { display: block; padding: 12px 16px; }
  .nsr-formula span { display: block; margin-top: 3px; }
}