/* The demo's overlay, drawn like the app's (Overlay.cs): orange boxes, a dark pop-up with an orange edge, the status
   chip top left. Pages set the frame around it; these colours stay the app's own in both themes. */
.yk-demo, .yk-pop {
  --yk-accent: #fb923c;
  --yk-panel: #26241f;
  --yk-ink: #eeeae4;
  --yk-muted: #aca59b;
}
.yk-demo { --yk-paper: #ffffff; --yk-letter: #111111; position: relative; container-type: inline-size; }
.yk-stage { position: relative; width: 100%; overflow: hidden; background: var(--yk-paper); }
.yk-page { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }
.yk-layer { position: absolute; inset: 0; pointer-events: none; }

/* without the art: panel frames, bubbles and the lettering, set in type */
.yk-panel { position: absolute; border: calc(var(--yk-w, 600px) * 0.004) solid var(--yk-letter); }
.yk-bubble { position: absolute; border: calc(var(--yk-w, 600px) * 0.0025) solid var(--yk-letter); border-radius: 50%; background: var(--yk-paper); }
.yk-line {
  position: absolute; writing-mode: vertical-rl; text-orientation: upright; line-height: 1; white-space: nowrap;
  font-family: "Zen Kaku Gothic New", "Yu Gothic", "Hiragino Sans", sans-serif; font-weight: 700; color: var(--yk-letter);
  letter-spacing: 0;
}

/* the read: boxes around the bubbles only, one after another in reading order */
.yk-box {
  position: absolute; border: 2px solid rgb(251 146 60 / 0.69); border-radius: 3px;
  opacity: 0; transform: scale(1.06); transition: opacity .18s ease, transform .22s cubic-bezier(.2, .9, .3, 1.2);
}
.yk-on .yk-box { opacity: 1; transform: none; transition-delay: calc(var(--i) * 45ms); }
.yk-reading .yk-stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 0 40%, rgb(251 146 60 / 0.22) 50%, transparent 60%) no-repeat;
  background-size: 100% 200%; animation: yk-scan .52s linear forwards;
}
@keyframes yk-scan { from { background-position: 0 100%; } to { background-position: 0 -100%; } }

.yk-word { position: absolute; border-radius: 2px; cursor: default; pointer-events: none; }
.yk-type .yk-word { position: static; }
.yk-on .yk-word { pointer-events: auto; cursor: pointer; }
.yk-word.hot { background: rgb(251 146 60 / 0.25); outline: 2px solid var(--yk-accent); }
.yk-type .yk-word.hot { background: rgb(251 146 60 / 0.3); outline-offset: 1px; }
.yk-word:focus-visible { outline: 3px solid var(--yk-accent); outline-offset: 2px; }

.yk-status {
  position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); padding: 5px 10px; border-radius: 6px;
  background: var(--yk-panel); color: var(--yk-ink); font: 13px/1.4 "Segoe UI", system-ui, sans-serif;
  opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; pointer-events: none;
}
.yk-status.show { opacity: .96; transform: none; }

.yk-pop {
  position: absolute; z-index: 5; width: min(340px, calc(100% - 12px)); padding: 10px 12px 10px;
  background: var(--yk-panel); color: var(--yk-ink); border: 1px solid var(--yk-accent); border-radius: 8px;
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.35); font: 14px/1.45 "Segoe UI", system-ui, sans-serif; text-align: left;
}
.yk-pop.docked { left: 6px !important; right: 6px; width: auto; bottom: 6px; top: auto !important; }
.yk-pop.docked.up { bottom: auto; top: 6px !important; }
.yk-pop p { margin: 0; }
.yk-ctx { font: 16px/1.5 "Yu Gothic UI", "Hiragino Sans", "Zen Kaku Gothic New", sans-serif; color: var(--yk-muted); margin-bottom: 8px !important; }
.yk-ctx b { color: var(--yk-accent); font-weight: 600; }
.yk-head { font-family: "Yu Gothic UI", "Hiragino Sans", "Zen Kaku Gothic New", sans-serif; }
.yk-k { font-size: 20px; font-weight: 600; }
.yk-r { font-size: 15px; color: var(--yk-muted); margin-left: .6em; }
.yk-c { font-size: 11px; color: var(--yk-accent); margin-left: .8em; }
.yk-why { font-size: 12px; color: var(--yk-muted); }
.yk-senses { margin: 4px 0 8px; padding-left: 1.5em; color: var(--yk-ink); }
.yk-senses li { margin-top: 2px; }
.yk-senses li::marker { color: var(--yk-muted); }
.yk-tags { color: var(--yk-muted); font-size: 11px; margin-left: .6em; }
.yk-anki {
  font: 600 13px/1 "Segoe UI", system-ui, sans-serif; color: var(--yk-panel); background: var(--yk-accent);
  border: 0; border-radius: 6px; padding: 7px 10px; cursor: pointer;
}
.yk-anki:disabled { background: transparent; color: var(--yk-accent); padding-left: 0; cursor: default; }
.yk-anki:focus-visible { outline: 2px solid var(--yk-ink); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .yk-box, .yk-status { transition: none; }
  .yk-on .yk-box { transition-delay: 0s; }
  .yk-reading .yk-stage::after { animation: none; }
}