/* dnsdance. The DigSite design system, carried across so the two tools read as
   siblings.

   Token rule, same as DigSite: :root defines the full light palette,
   html[data-theme="dark"] redefines it, and the same block is duplicated under
   prefers-color-scheme so that Auto follows the system. Never define a colour
   only inside a media query. */

:root {
  --dd-bg: #f6f7f4;
  --dd-bg-alt: #eceee6;
  --dd-panel: #ffffff;
  --dd-edge: #d6d9cc;
  --dd-hairline: #e4e7db;
  --dd-ink: #1b1f1c;
  --dd-ink-muted: #5f6660;
  --dd-accent: #00694E;          /* Cutler Green   */
  --dd-accent-dk: #024230;       /* Under the Elms */
  --dd-ok: #00694E;
  --dd-warn: #AA8A00;            /* Marigold */
  --dd-bad: #a02222;
  --dd-cache: #756E65;           /* Putnam */
  --dd-line: #8b9186;
  --dd-term-bg: #10140f;
  --dd-term-ink: #d8e3d2;
  --dd-term-dim: #8ba184;
  --dd-term-err: #f0857a;
  --dd-term-sys: #cbb85f;
  --dd-node-bg: #ffffff;
  --dd-sel: #E7ECC3;             /* Sycamore */
  --dd-font-mono: ui-monospace, "Cascadia Mono", "Consolas", "DejaVu Sans Mono", monospace;
  --dd-radius: 6px;
  --dd-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  --dd-shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.28);
}

/* Roles follow the course slides. */
:root {
  --dd-role-root: #a12ba1;
  --dd-role-tld: #1f63c8;
  --dd-role-auth: #0e7a55;
  --dd-role-res: #d9822b;
  --dd-role-client: #d9822b;
  --dd-role-host: #cc2222;
  --dd-step: #d11149;
}

html[data-theme="dark"] {
  --dd-bg: #14171a;
  --dd-bg-alt: #1b1f23;
  --dd-panel: #1e2328;
  --dd-edge: #333b41;
  --dd-hairline: #2a3137;
  --dd-ink: #e6ebe6;
  --dd-ink-muted: #9aa5a0;
  --dd-accent: #6fd0a8;
  --dd-accent-dk: #3fae85;
  --dd-ok: #6fd0a8;
  --dd-warn: #e0be4a;
  --dd-bad: #f0857a;
  --dd-cache: #a49b8e;
  --dd-line: #6d7a72;
  --dd-term-bg: #0b0e0c;
  --dd-node-bg: #1e2328;
  --dd-sel: #2c3a2c;
  --dd-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  --dd-shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.6);
  --dd-role-root: #d67ad6;
  --dd-role-tld: #6ea8f0;
  --dd-role-auth: #4fc296;
  --dd-role-res: #f0a95c;
  --dd-role-client: #f0a95c;
  --dd-role-host: #f27272;
  --dd-step: #ff7a96;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --dd-bg: #14171a;
    --dd-bg-alt: #1b1f23;
    --dd-panel: #1e2328;
    --dd-edge: #333b41;
    --dd-hairline: #2a3137;
    --dd-ink: #e6ebe6;
    --dd-ink-muted: #9aa5a0;
    --dd-accent: #6fd0a8;
    --dd-accent-dk: #3fae85;
    --dd-ok: #6fd0a8;
    --dd-warn: #e0be4a;
    --dd-bad: #f0857a;
    --dd-cache: #a49b8e;
    --dd-line: #6d7a72;
    --dd-term-bg: #0b0e0c;
    --dd-node-bg: #1e2328;
    --dd-sel: #2c3a2c;
    --dd-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    --dd-shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.6);
    --dd-role-root: #d67ad6;
    --dd-role-tld: #6ea8f0;
    --dd-role-auth: #4fc296;
    --dd-role-res: #f0a95c;
    --dd-role-client: #f0a95c;
    --dd-role-host: #f27272;
    --dd-step: #ff7a96;
  }
}

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--dd-bg);
  color: var(--dd-ink);
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---- toolbar ---------------------------------------------------------- */

#dd-toolbar {
  height: 46px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  background: var(--dd-panel);
  border-bottom: 2px solid var(--dd-accent);
}
#dd-toolbar .brand { display: flex; align-items: center; gap: 8px; }
.brand-mark { height: 26px; width: auto; border-radius: 4px; }
.brand-text { font-weight: bold; color: var(--dd-accent); white-space: nowrap; }
.brand-text-short { display: none; }
#dd-toolbar .tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dd-badge {
  font-size: 0.72rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 9px;
  border-radius: 10px;
  border: 1.5px solid var(--dd-accent);
  background: var(--dd-accent);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
}
html[data-theme="dark"] .dd-badge { color: #10201a; }
.dd-badge.is-quiet {
  background: transparent;
  color: var(--dd-ink-muted);
  border-color: var(--dd-edge);
  cursor: default;
}
.dd-badge[hidden] { display: none; }

.dd-lbl { font-size: 0.78rem; color: var(--dd-ink-muted); }
.dd-sel, .dd-input {
  font: inherit;
  font-size: 0.85rem;
  background: var(--dd-panel);
  color: var(--dd-ink);
  border: 1px solid var(--dd-edge);
  border-radius: var(--dd-radius);
  padding: 4px 6px;
}
.dd-input { font-family: var(--dd-font-mono); width: 20ch; }
.dd-input:focus, .dd-sel:focus { outline: 2px solid var(--dd-accent); outline-offset: 1px; }

.btn-primary, .btn-secondary, .btn-tertiary {
  cursor: pointer;
  border-radius: 6px;
  font: inherit;
  font-weight: bold;
  font-size: 0.85rem;
}
.btn-primary { background: var(--dd-accent); color: #fff; border: none; padding: 6px 15px; }
html[data-theme="dark"] .btn-primary { color: #10201a; }
.btn-secondary {
  background: var(--dd-panel);
  color: var(--dd-accent);
  border: 2px solid var(--dd-accent);
  padding: 4px 12px;
}
.btn-tertiary {
  background: transparent;
  color: var(--dd-accent);
  border: 2px solid var(--dd-accent);
  padding: 3px 11px;
  font-size: 1.15rem;
  line-height: 1.1;
}
.btn-primary:disabled, .btn-secondary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ---- status bar and step controls ------------------------------------- */

#dd-bar {
  flex: 0 0 auto;
  background: var(--dd-bg-alt);
  padding: 6px 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--dd-hairline);
}
.dd-steps { display: flex; align-items: center; gap: 4px; }
.dd-sbtn {
  font: inherit;
  font-size: 0.8rem;
  font-weight: bold;
  cursor: pointer;
  padding: 3px 10px;
  border-radius: var(--dd-radius);
  border: 1px solid var(--dd-edge);
  background: var(--dd-panel);
  color: var(--dd-ink);
}
.dd-sbtn:hover:not(:disabled) { border-color: var(--dd-accent); color: var(--dd-accent); }
.dd-sbtn:disabled { opacity: 0.4; cursor: not-allowed; }
.dd-sbtn.is-primary { background: var(--dd-accent); color: #fff; border-color: var(--dd-accent); }
html[data-theme="dark"] .dd-sbtn.is-primary { color: #10201a; }
.dd-sbtn.is-on { background: var(--dd-sel); border-color: var(--dd-accent); }

.dd-counter {
  font-family: var(--dd-font-mono);
  font-size: 0.8rem;
  color: var(--dd-ink-muted);
  white-space: nowrap;
}
.dd-score { display: flex; gap: 12px; margin-left: auto; }
.dd-score-item { font-size: 0.78rem; color: var(--dd-ink-muted); white-space: nowrap; }
.dd-score-item b { color: var(--dd-ink); font-weight: bold; }

/* The narration line. The single most useful element on the page during a
   lecture, so it gets the full width and does not truncate. */
#dd-note {
  flex: 1 0 100%;
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--dd-ink);
  min-height: 1.2em;
}
#dd-note.is-bad { color: var(--dd-bad); }
#dd-note .dd-note-idle { color: var(--dd-ink-muted); font-style: italic; }

/* Resolver picker, reused from DigSite's vantage buttons. */
#dd-resolvers { display: flex; gap: 4px; align-items: center; }
.dd-vbtn {
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
  padding: 2px 9px;
  border-radius: var(--dd-radius);
  border: 1px solid var(--dd-edge);
  background: var(--dd-panel);
  color: var(--dd-ink-muted);
}
.dd-vbtn.is-on {
  background: var(--dd-sel);
  border-color: var(--dd-accent);
  color: var(--dd-ink);
  font-weight: bold;
}

/* ---- main grid -------------------------------------------------------- */

.dd-app {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 10px;
  padding: 10px;
  min-height: 0;
  overflow: hidden;
}
.dd-pane {
  background: var(--dd-panel);
  border: 1px solid var(--dd-edge);
  border-radius: var(--dd-radius);
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
.dd-pane-title {
  margin: 0;
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dd-ink-muted);
  border-bottom: 1px solid var(--dd-hairline);
}
/* Bottom padding leaves room for the floating terminal to sit over the
   diagram without covering the part that is being drawn. */
.dd-tree { flex: 1 1 auto; overflow: auto; padding: 4px 4px 270px; }
.dd-learned { flex: 1 1 auto; overflow: auto; padding: 8px 10px; font-size: 0.82rem; }

/* ---- the dance -------------------------------------------------------- */

.dd-node-box { fill: var(--dd-node-bg); stroke: currentColor; stroke-width: 1.6; }
.dd-node { color: var(--dd-role-auth); }
.dd-node.role-root { color: var(--dd-role-root); }
.dd-node.role-tld { color: var(--dd-role-tld); }
.dd-node.role-auth { color: var(--dd-role-auth); }
.dd-node.role-resolver { color: var(--dd-role-res); }
.dd-node.role-client { color: var(--dd-role-client); }
.dd-node.role-host { color: var(--dd-role-host); }
.dd-node.role-client .dd-node-box,
.dd-node.role-resolver .dd-node-box { fill: var(--dd-sel); }

/* Named but not yet asked. */
.dd-node.is-known .dd-node-box { stroke-dasharray: 4 3; }
.dd-node.is-known { opacity: 0.55; }
.dd-node.is-current .dd-node-box { stroke-width: 3; }

.dd-node-role {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  fill: currentColor;
}
.dd-node-name {
  font-family: var(--dd-font-mono);
  font-size: 12.5px;
  font-weight: bold;
  fill: var(--dd-ink);
}
.dd-node-sub {
  font-family: var(--dd-font-mono);
  font-size: 10.5px;
  fill: var(--dd-ink-muted);
}
.dd-glyph { fill: none; stroke: currentColor; stroke-width: 1.6; }
.dd-glyph-fill { fill: currentColor; stroke: none; }

.dd-edge { fill: none; stroke-width: 2; }
.dd-edge.is-q { stroke: var(--dd-line); stroke-dasharray: 5 4; }
.dd-edge.is-ok { stroke: var(--dd-ok); }
.dd-edge.is-ref { stroke: var(--dd-role-tld); }
.dd-edge.is-warn { stroke: var(--dd-warn); }
.dd-edge.is-bad { stroke: var(--dd-bad); }
.dd-edge.is-past { opacity: 0.4; }
.dd-edge.is-current { stroke-width: 3.5; }

.dd-arrowhead { fill: currentColor; }
.dd-step circle { fill: var(--dd-step); stroke: var(--dd-panel); stroke-width: 1.5; }
.dd-step text { fill: #fff; font-size: 11px; font-weight: bold; }
.dd-step.is-past { opacity: 0.45; }
.dd-step.is-current circle { stroke: var(--dd-ink); stroke-width: 2.5; }
.dd-edge-label {
  font-size: 10px;
  font-family: var(--dd-font-mono);
  fill: var(--dd-ink-muted);
  text-anchor: middle;
}
.dd-tree-empty { fill: var(--dd-ink-muted); font-size: 14px; text-anchor: middle; }
.dd-chain-label {
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  fill: var(--dd-ink-muted);
}

/* ---- learned pane ----------------------------------------------------- */

.dd-learn-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 3px;
  font-family: var(--dd-font-mono);
  font-weight: bold;
  font-size: 0.8rem;
  color: var(--dd-ink);
}
.dd-learn-head:first-child { margin-top: 0; }
.dd-learn-count {
  margin-left: auto;
  background: var(--dd-bg-alt);
  border-radius: 9px;
  padding: 0 7px;
  font-size: 0.7rem;
  color: var(--dd-ink-muted);
}
.dd-learn-row {
  border-left: 3px solid var(--dd-ok);
  padding: 3px 0 3px 7px;
  margin-bottom: 4px;
}
.dd-learn-row.is-soon { border-left-color: var(--dd-warn); }
.dd-learn-row.is-gone { border-left-color: var(--dd-bad); opacity: 0.6; }
.dd-learn-top { display: flex; gap: 6px; align-items: baseline; }
.dd-learn-type {
  font-family: var(--dd-font-mono);
  font-size: 0.72rem;
  color: var(--dd-accent);
  font-weight: bold;
}
.dd-learn-ttl {
  margin-left: auto;
  font-family: var(--dd-font-mono);
  font-size: 0.72rem;
  color: var(--dd-ink-muted);
}
.dd-learn-val {
  font-family: var(--dd-font-mono);
  font-size: 0.72rem;
  color: var(--dd-ink-muted);
  word-break: break-all;
}
.dd-learn-bar {
  height: 3px;
  background: var(--dd-bg-alt);
  border-radius: 2px;
  margin-top: 3px;
  overflow: hidden;
}
.dd-learn-bar i { display: block; height: 100%; background: var(--dd-ok); }
.dd-learn-row.is-soon .dd-learn-bar i { background: var(--dd-warn); }
.dd-learn-note {
  font-size: 0.72rem;
  color: var(--dd-warn);
  font-style: italic;
  padding: 2px 0 2px 10px;
}
.dd-learn-empty { color: var(--dd-ink-muted); font-style: italic; }
.dd-learn-foot {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--dd-hairline);
  font-size: 0.75rem;
  color: var(--dd-ink-muted);
  line-height: 1.4;
}

/* ---- terminal --------------------------------------------------------- */

.dd-term {
  position: fixed;
  left: 14px;
  bottom: 44px;
  width: min(760px, calc(100vw - 28px));
  height: 300px;
  min-width: 320px;
  min-height: 140px;
  resize: both;
  overflow: hidden;
  z-index: 40;
  display: flex;
  flex-direction: column;
  background: var(--dd-term-bg);
  border: 1px solid var(--dd-accent);
  border-radius: var(--dd-radius);
  box-shadow: var(--dd-shadow-lg);
}
.dd-term.is-min { display: none; }
.dd-termbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 8px;
  background: var(--dd-accent-dk);
  color: #fff;
  cursor: move;
  touch-action: none;
  user-select: none;
}
.dd-termtitle { font-size: 0.75rem; font-weight: bold; letter-spacing: 0.04em; }
.dd-term-btn {
  margin-left: auto;
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 4px;
}
.dd-screen {
  flex: 1 1 auto;
  overflow: auto;
  padding: 6px 8px;
  font-family: var(--dd-font-mono);
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--dd-term-ink);
  white-space: pre-wrap;
  tab-size: 8;
}
.dd-line.out { color: var(--dd-term-ink); }
.dd-line.pr { color: var(--dd-accent); }
.dd-line.sys { color: var(--dd-term-sys); }
.dd-line.err { color: var(--dd-term-err); }
.dd-line.dim { color: var(--dd-term-dim); }
.dd-inputline {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 4px 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.dd-prompt {
  font-family: var(--dd-font-mono);
  font-size: 12.5px;
  color: var(--dd-accent);
  white-space: pre;
}
.dd-cmdline {
  flex: 1 1 auto;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--dd-font-mono);
  font-size: 12.5px;
  color: var(--dd-term-ink);
  caret-color: var(--dd-accent);
}
.dd-termrestore {
  position: fixed;
  left: 14px;
  bottom: 44px;
  z-index: 40;
  display: none;
  font: inherit;
  font-size: 0.8rem;
  font-weight: bold;
  cursor: pointer;
  padding: 5px 12px;
  border-radius: var(--dd-radius);
  border: 1px solid var(--dd-accent);
  background: var(--dd-accent-dk);
  color: #fff;
}
.dd-termrestore.is-on { display: block; }

/* ---- footer ----------------------------------------------------------- */

.dd-footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 14px;
  background: var(--dd-panel);
  border-top: 1px solid var(--dd-hairline);
  font-size: 0.75rem;
  color: var(--dd-ink-muted);
}
.dd-footer-note { margin-left: auto; }

/* ---- drawer ----------------------------------------------------------- */

#dd-menu-wrap { position: relative; }
.dropdown-drawer {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 250px;
  background: var(--dd-panel);
  border: 1px solid var(--dd-edge);
  border-radius: 8px;
  box-shadow: var(--dd-shadow-lg);
  padding: 6px;
  z-index: 70;
}
.dropdown-drawer[hidden] { display: none; }
.drawer-section {
  font-size: 0.68rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--dd-ink-muted);
  padding: 8px 8px 3px;
}
.drawer-item {
  display: block;
  width: 100%;
  text-align: left;
  box-sizing: border-box;
  font: inherit;
  font-size: 0.85rem;
  color: var(--dd-ink);
  background: transparent;
  border: none;
  border-radius: 4px;
  padding: 6px 8px;
  cursor: pointer;
  text-decoration: none;
}
.drawer-item:hover { background: var(--dd-bg-alt); }
.drawer-item.is-danger { color: var(--dd-bad); }
.drawer-toggle, .drawer-submenu-toggle { display: flex; align-items: center; gap: 10px; }
.drawer-toggle-state {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: bold;
  color: var(--dd-accent);
  background: var(--dd-bg-alt);
  border-radius: 9px;
  padding: 1px 8px;
}
.drawer-submenu-chev { margin-left: auto; transition: transform 0.12s; }
.drawer-item.drawer-submenu-toggle.is-open .drawer-submenu-chev { transform: rotate(90deg); }
.dd-subdrawer {
  position: static;
  margin: 2px 0 6px 10px;
  background: var(--dd-bg-alt);
  box-shadow: none;
  min-width: 0;
}
.drawer-sep { height: 1px; background: var(--dd-hairline); margin: 5px 4px; }
.drawer-hint {
  padding: 2px 8px 7px;
  font-size: 0.72rem;
  color: var(--dd-ink-muted);
  line-height: 1.35;
}

/* ---- modals ----------------------------------------------------------- */

.dd-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 60;
}
.dd-modal[hidden] { display: none; }
.dd-modal-card {
  background: var(--dd-panel);
  border: 1px solid var(--dd-edge);
  border-radius: var(--dd-radius);
  box-shadow: var(--dd-shadow-lg);
  padding: 18px 22px 16px;
  max-width: 560px;
  width: 100%;
  max-height: 86vh;
  overflow: auto;
}
.dd-modal-card h2 { margin: 0 0 10px; font-size: 1.2rem; color: var(--dd-accent); }
.dd-modal-card h3 { margin: 14px 0 4px; font-size: 0.98rem; color: var(--dd-accent); }
.dd-modal-card p { line-height: 1.5; }
.dd-modal-row { margin-top: 18px; display: flex; gap: 8px; justify-content: flex-end; }
.dd-btn {
  font: inherit;
  font-size: 0.85rem;
  font-weight: bold;
  cursor: pointer;
  padding: 6px 14px;
  border-radius: var(--dd-radius);
  border: 1px solid var(--dd-edge);
  background: var(--dd-panel);
  color: var(--dd-ink);
}
.dd-btn.is-primary { background: var(--dd-accent); color: #fff; border-color: var(--dd-accent); }
html[data-theme="dark"] .dd-btn.is-primary { color: #10201a; }
.dd-muted { color: var(--dd-ink-muted); }
.dd-pre {
  font-family: var(--dd-font-mono);
  font-size: 0.8rem;
  background: var(--dd-bg-alt);
  border-radius: 4px;
  padding: 8px 10px;
  overflow-x: auto;
  white-space: pre;
}
.dd-preset-list { display: grid; gap: 6px; }
.dd-preset {
  text-align: left;
  font: inherit;
  cursor: pointer;
  background: var(--dd-panel);
  border: 1px solid var(--dd-edge);
  border-radius: var(--dd-radius);
  padding: 8px 10px;
  color: var(--dd-ink);
}
.dd-preset:hover { border-color: var(--dd-accent); }
.dd-preset b { display: block; color: var(--dd-accent); font-size: 0.9rem; }
.dd-preset span { font-size: 0.78rem; color: var(--dd-ink-muted); line-height: 1.35; }
.dd-preset code {
  font-family: var(--dd-font-mono);
  font-size: 0.75rem;
  color: var(--dd-ink);
}

/* ---- high visibility, header hide, responsive ------------------------- */

html.dd-hivis body { font-size: 17px; }
html.dd-hivis .dd-screen, html.dd-hivis .dd-prompt, html.dd-hivis .dd-cmdline {
  font-size: 15px;
  line-height: 1.6;
}
html.dd-hivis #dd-note { font-size: 1.05rem; }
html.dd-hivis {
  --dd-ink: #000;
  --dd-ink-muted: #333;
  --dd-edge: #000;
  --dd-hairline: #767676;
  --dd-line: #000;
}
html.dd-hivis[data-theme="dark"] {
  --dd-ink: #fff;
  --dd-ink-muted: #dcdcdc;
  --dd-edge: #fff;
  --dd-hairline: #9a9a9a;
  --dd-line: #fff;
  --dd-term-ink: #fff;
}
html.dd-hivis .dd-node-box { stroke-width: 2.5; }
html.dd-hivis .dd-vbtn.is-on { outline: 2px solid var(--dd-ink); }

html.dd-nohdr #dd-toolbar { height: 30px; }
html.dd-nohdr #dd-toolbar .brand-mark { display: none; }
html.dd-nohdr #dd-toolbar .brand-text-full { display: none; }
html.dd-nohdr #dd-toolbar .brand-text-short { display: inline; }
html.dd-nohdr #dd-toolbar .brand-text { font-size: 15px; }
html.dd-nohdr .dd-score { display: none; }

@media (max-width: 900px) {
  .dd-app { grid-template-columns: 1fr; grid-template-rows: 1fr 220px; }
  .dd-footer-note { display: none; }
  .dd-score { margin-left: 0; }
  .dd-input { width: 14ch; }
}