/* ---- Slide canvas (shared by the viewer and the editor) -------------------- */

.ew-canvas {
  position: relative;
  overflow: hidden;
  flex: none;
  cursor: default;
  color: #000;
  font-size: 16px;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
}
.ew-canvas *, .ew-canvas *::before, .ew-canvas *::after { box-sizing: border-box; }

.ew-obj {
  position: absolute;
  margin: 0;
  transform-origin: 50% 50%;
  text-decoration: none !important;
  color: inherit;
}
.ew-line { left: 0; top: 0; width: 0; height: 0; }
.ew-line svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.ew-line .ew-hit { pointer-events: none; }

.ew-poly {
  position: absolute;
  left: 0; top: 0; width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
}

.ew-image { overflow: hidden; }
.ew-img {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.ew-txt {
  position: absolute;
  left: 0; top: 0; width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}
.ew-txt-in {
  width: 100%;
  flex: none;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  outline: none;
  min-height: 1em;
  cursor: inherit;
}
.ew-txt-in ul, .ew-txt-in ol { margin: 0; padding-left: 1.3em; }
.ew-txt-in p { margin: 0; }
.ew-txt-in sub, .ew-txt-in sup { line-height: 0; }

.ew-button { user-select: none; -webkit-user-select: none; }
/* any block can carry a link now, not only a button; give it the same clickable cursor */
.ew-obj.ew-live { cursor: pointer; }
/* a light veil instead of a filter (the block may already have a shadow filter) */
.ew-button.ew-live::after {
  content: '';
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  border-radius: inherit;
  background: #fff;
  opacity: 0;
  transition: opacity .15s;
  pointer-events: none;
}
.ew-button.ew-live:hover::after { opacity: .16; }
.ew-button.ew-live:active::after { opacity: .3; }

/* A button's pulsing highlight. scene.js (applyPulse) sets the style class and the custom
   properties: --pulse (colour), --pulse-size (reach, px), --pulse-scale ("beat") and --pulse-speed. */
.ew-pulse { animation: ew-pulse-ring var(--pulse-speed, 1.4s) infinite cubic-bezier(.6, 0, 0, 1); }
.ew-pulse.ew-pulse-glow { animation-name: ew-pulse-glow; animation-timing-function: ease-in-out; }
.ew-pulse.ew-pulse-beat { animation-name: ew-pulse-beat; animation-timing-function: ease-in-out; }
/* a clickable button calms down under the pointer, so the click itself doesn't land on a moving target */
.ew-live.ew-pulse:hover { animation: none; }
@keyframes ew-pulse-ring {
  0% { box-shadow: 0 0 0 0 var(--pulse); }
  100% { box-shadow: 0 0 0 var(--pulse-size, 18px) transparent; }
}
@keyframes ew-pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 var(--pulse-size, 18px) calc(var(--pulse-size, 18px) / 3) var(--pulse); }
}
@keyframes ew-pulse-beat {
  0%, 100% { scale: 1; }
  50% { scale: var(--pulse-scale, 1.09); }
}

/* ---- Code blocks ------------------------------------------------------------- */

.ew-code { overflow: hidden; }
.ew-code-dark { background: #0f172a; color: #e2e8f0; }
.ew-code-light { background: #f8fafc; color: #0f172a; box-shadow: inset 0 0 0 1px #d0d7de; }
.ew-code-body {
  display: flex;
  width: 100%; height: 100%;
  overflow: hidden;
  line-height: 1.5;
  pointer-events: none;
}
.ew-code-pre {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font: inherit;
  color: inherit;
  white-space: pre;
  tab-size: 4;
  background: none;
  border: 0;
  padding: 0;
}
.ew-code-pre code { font: inherit; color: inherit; background: none; padding: 0; white-space: inherit; }
.ew-code-gutter {
  flex: none;
  margin-right: 1em;
  text-align: right;
  white-space: pre;
  opacity: .4;
  user-select: none;
}
.ew-code-gutter[hidden] { display: none; }
/* an empty block in the editor shows what it is */
.ew-code-empty .ew-code-pre::before { content: attr(data-placeholder); opacity: .4; }
.ew-run-bar {
  position: absolute;
  top: 8px; right: 8px;
  display: flex;
  gap: 6px;
  pointer-events: auto;
}
.ew-run {
  position: relative;
  padding: 4px 14px 4px 26px;
  border: 0;
  border-radius: 6px;
  background: #16a34a;
  color: #fff;
  font: 600 14px/1.4 system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
.ew-run::before {
  content: '';
  position: absolute;
  left: 10px; top: 50%;
  margin-top: -5px;
  border-left: 9px solid currentColor;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.ew-run:hover { background: #15803d; }
.ew-console {
  padding: 4px 10px;
  border: 1px solid rgba(148, 163, 184, .55);
  border-radius: 6px;
  background: rgba(15, 23, 42, .85);
  color: #e2e8f0;
  font: 600 14px/1.4 system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
.ew-console::before { content: '>_'; margin-right: 6px; font: 700 12px/1 'JetBrains Mono', Consolas, monospace; color: #7dd3fc; }
.ew-console:hover { background: #1e293b; }
.ew-console:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ew-run:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.ew-code-dark .hl-kw { color: #c792ea; }
.ew-code-dark .hl-str { color: #a5e075; }
.ew-code-dark .hl-num { color: #f78c6c; }
.ew-code-dark .hl-com { color: #64748b; font-style: italic; }
.ew-code-dark .hl-fn, .ew-code-dark .hl-key { color: #82aaff; }
.ew-code-dark .hl-type, .ew-code-dark .hl-attr, .ew-code-dark .hl-id { color: #ffcb6b; }
.ew-code-dark .hl-op { color: #89ddff; }
.ew-code-dark .hl-var { color: #f07178; }
.ew-code-light .hl-kw { color: #7c3aed; }
.ew-code-light .hl-str { color: #15803d; }
.ew-code-light .hl-num { color: #c2410c; }
.ew-code-light .hl-com { color: #6b7280; font-style: italic; }
.ew-code-light .hl-fn, .ew-code-light .hl-key { color: #1d4ed8; }
.ew-code-light .hl-type, .ew-code-light .hl-attr, .ew-code-light .hl-id { color: #b45309; }
.ew-code-light .hl-op { color: #0e7490; }
.ew-code-light .hl-var { color: #be123c; }

/* ---- Viewer ----------------------------------------------------------------- */

.slide-col {
  position: relative;
  height: 100vh;
  padding-top: 57px;
  background: #e9ecef;
}
.stage {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.stage-sizer { position: relative; flex: none; box-shadow: 0 2px 18px rgba(0, 0, 0, .18); }
.stage-info {
  position: absolute;
  left: 12px; bottom: 12px;
  z-index: 5;
  padding: 2px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .85);
  color: #5b5b5b;
  font-size: 14px;
}
.stage-tools {
  position: absolute;
  right: 12px; bottom: 12px;
  z-index: 5;
  display: flex;
  gap: 6px;
}
.stage-tools .btn { box-shadow: 0 1px 4px rgba(0, 0, 0, .2); }
.slide-col:fullscreen { padding-top: 0; background: #000; }
.slide-col:fullscreen .stage-sizer { box-shadow: none; }
.slide-col:fullscreen .stage-info { display: none; }
.slide-col:fullscreen .stage-tools { opacity: 0; transition: opacity .3s; }
.slide-col:fullscreen:hover .stage-tools { opacity: 1; }
.stage-tools .fs-only { display: none; }
.slide-col:fullscreen .stage-tools .fs-only { display: inline-block; }