/* V3 dark restyle over approved embed.css. Transparent so #05060A shows through. */
:root,
html,
body {
  color-scheme: dark;
  --ink: #ECEEF5;
  --accent: #5BE7FF;
  --mint: #5BE7FF;
  color: #ECEEF5;
  background: transparent;
}

html,
body,
.promo {
  background: transparent;
  overflow: hidden;
  height: 100%;
}

.promo {
  min-height: 100%;
}

.eyebrow {
  color: rgba(236, 238, 245, .56);
}

.word {
  color: #ECEEF5;
}

.word-write {
  color: #5BE7FF;
}

.editor {
  background: linear-gradient(145deg, #141824f2, #0a0d16f7);
  border: 1px solid rgba(91, 231, 255, .18);
  box-shadow: 0 25px 55px -25px #00000080, inset 0 1px 0 #ffffff0b;
}

[data-phase="done"] .editor {
  box-shadow: 0 25px 55px -25px #00000080, inset 0 1px 0 #ffffff0b;
}

.editor-top {
  color: rgba(236, 238, 245, .56);
  border-bottom-color: rgba(91, 231, 255, .12);
}

.editor-top svg {
  stroke: rgba(236, 238, 245, .56);
}

.lights i {
  background: rgba(236, 238, 245, .22);
}

.note-label,
.editor-foot,
.signature,
.key-label {
  color: rgba(236, 238, 245, .56);
}

.note-title {
  color: #ECEEF5;
}

.note-body {
  color: #ECEEF5;
}

.paper-lines i {
  background: linear-gradient(90deg, rgba(91, 231, 255, .16), transparent);
}

.saved svg {
  stroke: #5BE7FF;
}

.note-dot {
  background: rgba(236, 238, 245, .28);
}

.caret {
  background: #5BE7FF;
}

.capsule {
  box-shadow: inset 0 1px 0 #ffffff1c, 0 10px 24px -8px #05060aa0, 0 0 22px rgba(91, 231, 255, .35);
}

button {
  color: #ECEEF5;
  background: rgba(236, 238, 245, .06);
  border-color: rgba(91, 231, 255, .18);
}

button:hover {
  background: rgba(236, 238, 245, .12);
}

button:focus-visible {
  outline-color: #5BE7FF;
}

.key-hint kbd {
  color: #ECEEF5;
  background: #12151f;
  border-color: rgba(91, 231, 255, .22);
  box-shadow: 0 3px 0 #05060A, 0 5px 8px #00000050;
}

.key-pressed .key-hint kbd {
  background: #1a2030;
  box-shadow: none;
}

@media (max-width: 760px) {
  .promo {
    min-height: 100%;
  }
}