.header-inner {
  --rmlp-header-gap: var(--rmlp-space-2);
  flex-wrap: wrap;
  padding-block: var(--rmlp-space-3);
}

.dt-app {
  --dt-content-width: 920px;
  --dt-control-height: 44px;
  --dt-transition-duration: 160ms;
  --dt-modal-layer: 50;
  --dt-modal-width: 520px;
  --dt-tile-layer: 1;
  --dt-connection-layer: 2;
  --dt-edge-width: 2.5;
  --dt-edge-highlight-width: 4;
  --dt-edge-halo-width: 7;
  --dt-edge-hit-width: 18;
  --dt-active-fill: color-mix(in srgb, var(--rmlp-accent-teal), var(--rmlp-paper-raised) 90%);
  --dt-clash-fill: color-mix(in srgb, var(--rmlp-accent-red), var(--rmlp-paper-raised) 93%);
}

.dt-app [hidden] { display: none; }

.dt-header-actions,
.dt-publisher-lockup,
.dt-session,
.dt-session-actions,
.dt-notice-actions,
.dt-share-actions,
.dt-modal-actions,
.dt-tutorial-controls,
.dt-tutorial-progress-row {
  display: flex;
  align-items: center;
}

.dt-header-branding {
  display: block;
}

.dt-publisher-lockup {
  min-height: 1.35rem;
  margin-bottom: 0.1rem;
  gap: 0.4rem;
  color: var(--rmlp-ink-muted);
  font-size: 0.7rem;
  font-weight: var(--rmlp-font-weight-bold);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.dt-logo {
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
}

.dt-wordmark {
  margin: 0;
  font-size: var(--rmlp-text-lg);
}

.dt-header-actions {
  margin-left: auto;
  gap: var(--rmlp-space-2);
}

.dt-pill,
.dt-btn {
  min-height: var(--dt-control-height);
  padding: var(--rmlp-space-2) 14px;
  border: 1px solid var(--rmlp-rule);
  border-radius: var(--rmlp-radius-md);
  color: var(--rmlp-ink);
  background: var(--rmlp-paper-raised);
  font: inherit;
  font-size: var(--rmlp-text-sm);
  font-weight: var(--rmlp-font-weight-semibold);
  cursor: pointer;
  transition: background-color var(--dt-transition-duration) ease;
}

.dt-pill {
  border-radius: 999px;
  color: var(--rmlp-ink-muted);
  white-space: nowrap;
}

.dt-pill:hover:not(:disabled),
.dt-btn:hover:not(:disabled) { background: var(--rmlp-paper); }

.dt-pill:disabled,
.dt-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.dt-btn-accent {
  color: var(--rmlp-paper);
  border-color: var(--rmlp-accent-red);
  background: var(--rmlp-accent-red);
}

.dt-btn-accent:hover:not(:disabled) {
  background: color-mix(in srgb, var(--rmlp-accent-red), var(--rmlp-ink) 15%);
}

.dt-main {
  width: min(100%, var(--dt-content-width));
  margin-inline: auto;
  padding: var(--rmlp-space-4) var(--rmlp-page-gutter) var(--rmlp-space-8);
  font-size: var(--rmlp-text-base);
}

.dt-day,
.dt-save-status,
.dt-hint,
.dt-intro {
  color: var(--rmlp-ink-muted);
  font-size: var(--rmlp-text-sm);
}

.dt-day,
.dt-save-status,
.dt-hint { margin: 0; }

.dt-tagline {
  margin: var(--rmlp-space-2) 0 0;
  color: var(--rmlp-accent-teal);
  font-family: var(--rmlp-font-display);
  font-size: clamp(1.65rem, 5vw, 2.4rem);
  font-weight: var(--rmlp-font-weight-semibold);
  line-height: 1.2;
}

.dt-intro {
  max-width: 700px;
  margin: var(--rmlp-space-2) 0 var(--rmlp-space-4);
  line-height: 1.45;
}

.dt-session {
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--rmlp-space-2);
  margin-bottom: var(--rmlp-space-3);
  font-size: var(--rmlp-text-sm);
}

.dt-session-actions,
.dt-notice-actions,
.dt-share-actions,
.dt-modal-actions,
.dt-tutorial-controls {
  flex-wrap: wrap;
  gap: var(--rmlp-space-2);
}

.dt-notice {
  padding: var(--rmlp-space-4);
  margin-bottom: var(--rmlp-space-4);
  border: 1px solid var(--rmlp-rule);
  border-inline-start: var(--rmlp-space-1) solid var(--rmlp-accent-teal);
  border-radius: var(--rmlp-radius-md);
  background: var(--rmlp-paper-raised);
  font-size: var(--rmlp-text-sm);
}

.dt-notice h2 { margin: 0 0 var(--rmlp-space-2); font-size: var(--rmlp-text-base); }
.dt-notice p { margin: 0 0 var(--rmlp-space-3); }

.dt-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--rmlp-space-2);
  max-width: 380px;
  margin: var(--rmlp-space-4) auto;
  color: var(--rmlp-ink-muted);
  font-family: var(--rmlp-font-mono);
  font-size: var(--rmlp-text-xs);
  text-align: center;
  text-transform: uppercase;
}

.dt-stats b {
  display: block;
  color: var(--rmlp-ink);
  font-size: var(--rmlp-text-xl);
}

.dt-board-panel,
.dt-answer,
.dt-share-panel {
  padding: clamp(var(--rmlp-space-3), 3vw, var(--rmlp-space-6));
  border: 1px solid var(--rmlp-rule);
  border-radius: var(--rmlp-radius-lg);
  background: var(--rmlp-paper-raised);
}

.dt-board-key {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--rmlp-space-2);
  margin: 0 0 var(--rmlp-space-4);
  color: var(--rmlp-accent-teal);
  font-size: var(--rmlp-text-xs);
}

.dt-clash-key { color: var(--rmlp-accent-red); }

.dt-board-wrap { position: relative; }

.dt-board {
  position: relative;
}

.dt-connections {
  position: absolute;
  z-index: var(--dt-connection-layer);
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.dt-connection { color: var(--rmlp-accent-red); cursor: pointer; }
.dt-connection path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dt-edge-halo { stroke: var(--rmlp-paper-raised); stroke-width: var(--dt-edge-halo-width); }
.dt-edge { stroke: currentColor; stroke-width: var(--dt-edge-width); }
.dt-edge-hit { stroke: transparent; stroke-width: var(--dt-edge-hit-width); pointer-events: stroke; }
.dt-edge-endpoint { fill: currentColor; stroke: var(--rmlp-paper-raised); stroke-width: 1.5; pointer-events: all; }
.dt-connection.is-inspected { color: var(--rmlp-accent-teal); }
.dt-connection.is-inspected .dt-edge { stroke-width: var(--dt-edge-highlight-width); }
.dt-connections.has-highlight .dt-connection:not(.is-inspected) { opacity: 0.28; }
.dt-connection:focus { outline: none; }
.dt-connection:focus-visible .dt-edge-endpoint {
  stroke: var(--rmlp-ink);
  stroke-width: 2;
}
.dt-connection-status {
  min-height: 2.6em;
  margin: var(--rmlp-space-3) 0 0;
  color: var(--rmlp-accent-teal);
  font-size: var(--rmlp-text-xs);
  text-align: center;
}

.dt-tile:focus-visible {
  outline: var(--rmlp-focus-outline-width) solid var(--rmlp-ink);
  outline-offset: var(--rmlp-focus-outline-offset);
}

/* Both faces use the same metrics, so flipping cannot resize or move a tile. */
.dt-tile .dt-word {
  font-weight: var(--rmlp-font-weight-bold);
}

.dt-tile {
  position: absolute;
  z-index: var(--dt-tile-layer);
  display: grid;
  min-width: 0;
  padding: var(--rmlp-space-2);
  border: 1px solid var(--rmlp-rule);
  border-radius: var(--rmlp-radius-md);
  color: var(--rmlp-ink);
  background: var(--rmlp-paper-raised);
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.dt-tile:hover:not(:disabled) { border-color: var(--rmlp-accent-teal); }
.dt-tile:disabled { cursor: default; }
.dt-tile.has-clash { border-color: var(--rmlp-accent-red); }

.dt-tile-number {
  margin: 0 var(--rmlp-space-1) var(--rmlp-space-1);
  color: var(--rmlp-ink-muted);
  font-family: var(--rmlp-font-mono);
  font-size: 0.7rem;
  line-height: 1.5;
  text-transform: uppercase;
}

.dt-word {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: var(--rmlp-space-2);
  min-height: var(--dt-control-height);
  padding: var(--rmlp-space-1) var(--rmlp-space-2);
  border: 1px solid transparent;
  border-radius: var(--rmlp-radius-sm);
  color: var(--rmlp-ink-muted);
  font-size: var(--rmlp-text-sm);
  line-height: 1.3;
}

.dt-word-marker { flex-shrink: 0; font-size: 0.75rem; }
.dt-word-text { overflow-wrap: anywhere; }
.dt-word.is-active { color: var(--rmlp-accent-teal); background: var(--dt-active-fill); font-weight: var(--rmlp-font-weight-bold); }
.dt-word.is-clashing { color: var(--rmlp-accent-red); background: var(--dt-clash-fill); }
.dt-word.is-inspected { border-color: var(--rmlp-accent-teal); outline: 2px solid var(--rmlp-accent-teal); }

.dt-board-loading,
.dt-message {
  margin: var(--rmlp-space-3) 0 0;
  color: var(--rmlp-ink-muted);
  font-size: var(--rmlp-text-sm);
  text-align: center;
}

.dt-message.is-success { color: var(--rmlp-accent-teal); font-weight: var(--rmlp-font-weight-semibold); }
.dt-message.is-error { color: var(--rmlp-invalid); }

.dt-answer,
.dt-share-panel,
.dt-relationships { margin-top: var(--rmlp-space-6); }

.dt-answer h2,
.dt-relationships h2 {
  margin: 0 0 var(--rmlp-space-1);
  font-family: var(--rmlp-font-display);
  font-size: var(--rmlp-text-lg);
}

.dt-answer > p { margin: 0 0 var(--rmlp-space-4); color: var(--rmlp-ink-muted); }

.dt-relationship-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rmlp-space-2);
  list-style: none;
  margin: var(--rmlp-space-3) 0 0;
  padding: 0;
}

.dt-relationship {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--rmlp-space-2);
  width: 100%;
  min-height: var(--dt-control-height);
  padding: var(--rmlp-space-2);
  border: 1px solid var(--rmlp-rule);
  border-radius: var(--rmlp-radius-sm);
  color: var(--rmlp-ink-muted);
  background: var(--rmlp-paper-raised);
  text-align: left;
  font: inherit;
  font-size: var(--rmlp-text-xs);
  line-height: 1.4;
  cursor: pointer;
}

.dt-relationship-label { overflow-wrap: anywhere; }
.dt-relationship-status { flex-shrink: 0; font-size: 0.7rem; }
.dt-relationship.is-clashing { color: var(--rmlp-accent-red); border-color: var(--rmlp-accent-red); background: var(--dt-clash-fill); }
.dt-relationship[aria-pressed="true"] { outline: 2px solid var(--rmlp-accent-teal); outline-offset: 1px; }
.dt-relationship:focus-visible { outline: var(--rmlp-focus-outline-width) solid var(--rmlp-ink); outline-offset: var(--rmlp-focus-outline-offset); }
.dt-inspection-status { min-height: 2.8em; margin: var(--rmlp-space-2) 0 0; color: var(--rmlp-ink-muted); font-size: var(--rmlp-text-xs); }

.dt-solution {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--rmlp-space-2);
}

.dt-solution-word {
  padding: var(--rmlp-space-2);
  border: 1px solid var(--rmlp-rule);
  border-radius: var(--rmlp-radius-sm);
  background: var(--dt-active-fill);
  color: var(--rmlp-accent-teal);
  font-size: var(--rmlp-text-xs);
  overflow-wrap: anywhere;
}

.dt-share-panel canvas { display: block; max-width: 100%; height: auto; margin-block: var(--rmlp-space-2); }
.dt-share-actions { margin-top: var(--rmlp-space-3); }
.dt-share-status { min-height: 1.5em; color: var(--rmlp-ink-muted); font-size: var(--rmlp-text-sm); }
.dt-share-manual { margin-top: var(--rmlp-space-2); }
.dt-share-manual label { display: block; margin-bottom: var(--rmlp-space-1); font-size: var(--rmlp-text-sm); }
.dt-share-manual textarea { width: 100%; padding: var(--rmlp-space-2); font: inherit; }

.dt-footer {
  padding: var(--rmlp-space-6) var(--rmlp-page-gutter);
  border-top: 1px solid var(--rmlp-rule);
}

.dt-footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--rmlp-space-3) var(--rmlp-space-6);
  font-size: var(--rmlp-text-sm);
}

.dt-modal-backdrop {
  position: fixed;
  z-index: var(--dt-modal-layer);
  inset: 0;
  display: grid;
  overflow-y: auto;
  place-items: center;
  padding: var(--rmlp-space-4);
  background: rgb(from var(--rmlp-ink) r g b / 45%);
}

.dt-modal {
  position: relative;
  width: min(100%, var(--dt-modal-width));
  max-height: calc(100vh - 2 * var(--rmlp-space-4));
  overflow-y: auto;
  padding: clamp(var(--rmlp-space-6), 5vw, var(--rmlp-space-8));
  border: 1px solid var(--rmlp-rule);
  border-radius: var(--rmlp-radius-lg);
  background: var(--rmlp-paper-raised);
  box-shadow: 0 20px 60px rgb(from var(--rmlp-ink) r g b / 22%);
}

.dt-modal-close {
  position: absolute;
  top: var(--rmlp-space-2);
  right: var(--rmlp-space-2);
  width: var(--dt-control-height);
  height: var(--dt-control-height);
  border: 0;
  color: var(--rmlp-ink-muted);
  background: transparent;
  font: inherit;
  font-size: var(--rmlp-text-xl);
  cursor: pointer;
}

.dt-modal-title { margin: 0 var(--rmlp-space-8) var(--rmlp-space-3) 0; font-family: var(--rmlp-font-display); }
.dt-completion-stat { color: var(--rmlp-accent-teal); font-size: var(--rmlp-text-lg); font-weight: var(--rmlp-font-weight-semibold); }
.dt-tutorial-eyebrow { margin: 0; color: var(--rmlp-accent-red); font-family: var(--rmlp-font-mono); font-size: var(--rmlp-text-xs); text-transform: uppercase; }
.dt-tutorial-description { min-height: 6em; font-size: var(--rmlp-text-sm); }
.dt-tutorial-example { padding: var(--rmlp-space-3); border: 1px solid var(--rmlp-rule); border-radius: var(--rmlp-radius-md); background: var(--rmlp-paper); }
.dt-tutorial-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rmlp-space-3); }
.dt-tutorial-tile { min-width: 0; padding: var(--rmlp-space-1); border: 1px solid var(--rmlp-rule); border-radius: var(--rmlp-radius-sm); background: var(--rmlp-paper-raised); }
.dt-tutorial-note { margin: var(--rmlp-space-3) 0 0; color: var(--rmlp-ink-muted); font-size: var(--rmlp-text-xs); text-align: center; }
.dt-tutorial-progress-row { justify-content: space-between; margin-block: var(--rmlp-space-4); color: var(--rmlp-ink-muted); font-size: var(--rmlp-text-sm); }
.dt-tutorial-dots { display: flex; gap: var(--rmlp-space-2); }
.dt-tutorial-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rmlp-rule); }
.dt-tutorial-dot.is-current { background: var(--rmlp-accent-teal); }
.dt-tutorial-controls { justify-content: flex-end; }

@media (max-width: 600px) {
  .dt-wordmark { font-size: 1.35rem; }
  .dt-pill { padding: var(--rmlp-space-1) var(--rmlp-space-2); font-size: 0.9rem; }
  .dt-main { padding-inline: var(--rmlp-space-3); }
  .dt-board-panel { padding-inline: var(--rmlp-space-2); }
  .dt-tile { padding: var(--rmlp-space-1); }
  .dt-word { gap: var(--rmlp-space-1); padding-inline: 2px; font-size: var(--rmlp-text-xs); }
  .dt-relationship-list { grid-template-columns: 1fr; }
  .dt-solution { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dt-tutorial-description { min-height: 8em; }
}

@media (prefers-reduced-motion: reduce) {
  .dt-pill,
  .dt-btn { transition: none; }
}