/* Isolated authentic Nutsy UI layer for the homepage R2 modal demo. */
@font-face {
  font-family: Inter;
  src: url("./assets/inter-latin-wght-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

.home-drag-demo {
  position: relative;
  width: 100%;
  padding: clamp(18px, 3vw, 42px);
  overflow: hidden;
  border-radius: 24px;
  background: #e9eae6;
}
.home-drag-demo, .home-drag-demo * { box-sizing: border-box; }
.home-drag-demo__viewport { position: relative; width: 100%; overflow: hidden; }
.home-drag-demo__mount {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1040px;
  height: 390px;
  transform: translateX(-50%) scale(var(--home-drag-demo-scale, 1));
  transform-origin: top center;
}
.home-drag-demo .demo-shell { position: relative; text-align: left; transform-origin: 50% 50%; }
.home-drag-demo .demo-caption { display: none; }
.home-drag-demo .nn-demo-ui { user-select: none; -webkit-user-select: none; }
.home-drag-demo .nn-demo-panel:hover > .nn-demo-handle--panel { opacity: var(--nn-handle-opacity-rest); }
.home-drag-demo .nn-demo-item:hover > .nn-demo-handle--item { opacity: var(--nn-handle-opacity-rest); }
.home-drag-demo .nn-demo-handle--item.is-handle-hover,
.home-drag-demo .nn-demo-handle--item.is-handle-active { opacity: var(--nn-handle-opacity-active); }

@media (max-width: 720px) {
  .home-drag-demo { padding: 16px 10px; border-radius: 16px; }
}


.nn-demo-ui {
  --nn-font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --nn-text: #242523;
  --nn-muted: #81847e;
  --nn-accent: #0cb6ab;
  --nn-canvas: #f7f7f5;
  --nn-control: #edf1f3;
  --nn-handle-opacity-rest: .16;
  --nn-handle-opacity-active: .7;
  width: 680px;
  min-height: 300px;
  color: var(--nn-text);
  font-family: var(--nn-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: normal;
}
.nn-demo-panel {
  position: relative;
  width: 100%;
  min-height: 196px;
  margin: 0 0 14px;
  padding: 29px 26px 13px;
  border: 0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 8px #233c4914;
  transform-origin: 50% 50%;
}
.nn-demo-panel.is-drop-parent { background: color-mix(in srgb, var(--nn-accent) 5%, #fff); }
.nn-demo-blocks { display: grid; gap: 12px; padding-inline: 8px; }
.nn-demo-block, .nn-demo-list { position: relative; min-width: 0; }
.nn-demo-block::before {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: -26px;
  z-index: 2;
  width: 1px;
  background: linear-gradient(to bottom,currentColor 0 5px,transparent 5px 23px,currentColor 23px);
  color: var(--nn-muted);
  opacity: 0;
  pointer-events: none;
  transition: color 100ms ease,opacity 100ms ease;
  content: "";
}
.nn-demo-block::after {
  position: absolute;
  top: 11px;
  left: -29px;
  z-index: 3;
  width: 7px;
  height: 11px;
  background: radial-gradient(circle at 1.5px 1.5px,currentColor 0 1.25px,transparent 1.5px) 0 0/4px 4px repeat;
  color: var(--nn-muted);
  opacity: 0;
  pointer-events: none;
  transition: color 100ms ease,opacity 100ms ease,scale 100ms ease;
  content: "";
}
.nn-demo-block.is-virtual-hovered::before,
.nn-demo-block.is-virtual-hovered::after { opacity: .55; }
.nn-demo-list {
  --item-indent-step: 14px;
  --item-handle-hit-size: 14px;
  --item-handle-marker-gap: 2px;
  --item-marker-track-size: 16px;
  --item-text-marker-gap: 2px;
}
.nn-demo-item {
  --item-size: 16px;
  --item-leading: 1.35;
  --item-weight: 400;
  --item-spacing: 6px;
  position: relative;
  display: grid;
  grid-template-columns: var(--item-marker-track-size) minmax(0, 1fr);
  align-items: start;
  min-height: 22px;
  margin-inline-start: calc(var(--item-level) * var(--item-indent-step));
  margin-block-end: var(--item-spacing);
  background: transparent;
}
.nn-demo-item::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 14px;
  background: transparent;
  content: "";
  pointer-events: none;
  transition: background 100ms ease;
}
.nn-demo-item > * { position: relative; z-index: 1; }
.nn-demo-item.is-demo-hover::before { background: #edf1f3; }
.nn-demo-item.is-demo-pressed::before { background: color-mix(in srgb, var(--nn-accent) 10%, #fbfcfc); }
.nn-demo-item.is-demo-dropped::before {
  background: color-mix(in srgb, var(--nn-muted) 10%, transparent);
}
.nn-demo-item[data-level="0"] {
  --item-marker-track-size: 0px;
  --item-text-marker-gap: 0px;
  --item-size: 18px;
  --item-leading: 1.4;
  --item-weight: 620;
  letter-spacing: -.005em;
}
.nn-demo-item[data-level="2"] { --item-size: 14px; --item-leading: 1.4; }
.nn-demo-item__editor {
  min-width: 0;
  min-height: 1lh;
  padding: 1px 0;
  padding-inline-start: var(--item-text-marker-gap);
  color: color-mix(in srgb, var(--nn-text) 84%, var(--nn-canvas));
  font: var(--item-weight) var(--item-size)/var(--item-leading) var(--nn-font);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.nn-demo-item[data-level="0"] > .nn-demo-item__editor { color: var(--nn-text); }
.nn-demo-marker {
  align-self: start;
  display: grid;
  place-items: center;
  height: calc(1lh + 2px);
  color: var(--nn-text);
  font: var(--item-weight) var(--item-size)/var(--item-leading) var(--nn-font);
}
.nn-demo-marker > span { display: block; line-height: 1; translate: 0 -1px; }
.nn-demo-item[data-level="0"] > .nn-demo-marker { visibility: hidden; }
.nn-demo-handle { color: var(--nn-muted); }
.nn-demo-handle--panel {
  position: absolute;
  top: 3px;
  left: 4px;
  z-index: 2;
  width: 22px;
  height: 22px;
  opacity: var(--nn-handle-opacity-rest);
  transition: opacity 100ms ease;
}
.nn-demo-handle--panel::before {
  position: absolute;
  top: 5.5px;
  left: 7.75px;
  width: 2.5px;
  height: 2.5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 6px 0 currentColor, 0 5.5px currentColor, 6px 5.5px currentColor,
    0 11px currentColor, 6px 11px currentColor;
  content: "";
}
.nn-demo-handle--block {
  position: absolute;
  top: -2px;
  left: -33px;
  z-index: 3;
  width: 14px;
  height: 28px;
  color: transparent;
  opacity: 0;
}
.nn-demo-panel:hover > .nn-demo-handle--panel { opacity: var(--nn-handle-opacity-active); }
.nn-demo-handle--item {
  position: absolute;
  inset-inline-start: -16px;
  top: 0;
  display: grid;
  place-items: center;
  width: 14px;
  height: calc(1lh + 2px);
  color: var(--nn-muted);
  font-size: var(--item-size);
  line-height: var(--item-leading);
  opacity: var(--nn-handle-opacity-rest);
  transition: color 100ms ease, opacity 100ms ease;
}
.nn-demo-handle--item::before {
  width: 9px;
  height: 4px;
  background: radial-gradient(circle,currentColor 0 1.75px,transparent 2px) 0 50%/4px 4px no-repeat,
    radial-gradient(circle,currentColor 0 1.75px,transparent 2px) 5px 50%/4px 4px no-repeat;
  content: "";
  scale: 1;
  transition: scale 100ms ease;
}
.nn-demo-item:hover > .nn-demo-handle--item,
.nn-demo-item.is-hovered > .nn-demo-handle--item { opacity: var(--nn-handle-opacity-active); }
.nn-demo-handle--item.is-handle-hover,
.nn-demo-handle--item.is-handle-active { color: var(--nn-accent); opacity: var(--nn-handle-opacity-active); }
.nn-demo-handle--item.is-handle-hover::before,
.nn-demo-handle--item.is-handle-active::before { scale: 1.25; }
.nn-demo-handle--item.is-handle-active { cursor: grabbing; }
.nn-demo-placeholder {
  display: none;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  height: 28px;
  margin-inline-start: calc(var(--placeholder-level) * 14px);
  border: 0;
  border-radius: 2px;
  background: color-mix(in srgb, var(--nn-muted) 10%, transparent);
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--nn-accent) 72%, transparent);
}
.nn-demo-item-ghost {
  --item-indent-step: 14px;
  --item-handle-hit-size: 14px;
  --item-handle-marker-gap: 2px;
  --item-marker-track-size: 16px;
  --item-text-marker-gap: 2px;
  display: none;
  position: absolute;
  z-index: 6;
  width: calc(100% - 52px);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}
.nn-demo-item-ghost::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 22px;
  z-index: 0;
  border-radius: 14px;
  background: color-mix(in srgb, var(--nn-accent) 10%, #fbfcfc);
  content: "";
}
.nn-demo-item-ghost .nn-demo-handle--item { opacity: .35; }
.nn-demo-item-ghost .nn-demo-item { z-index: 1; }
.nn-demo-item.is-drag-source { display: none; }
.nn-demo-cursor {
  position: absolute;
  z-index: 9;
  width: 23px;
  height: 30px;
  pointer-events: none;
  filter: drop-shadow(0 3px 3px #0002);
}
.nn-demo-cursor svg { display: block; width: 100%; height: 100%; fill: var(--nn-text); stroke: #fff; stroke-width: 1.3; }

.demo-dragging { padding: 0 70px; }
.nn-demo-drag-stage { position: relative; }
.demo-dragging { width: 1040px; padding: 0; }
.nn-demo-script-stage { width: 1040px; min-height: 390px; }
.nn-demo-script-panels { display: flex; align-items: flex-start; gap: 18px; }
.nn-demo-script-panels > .nn-demo-panel { flex: 0 0 334px; min-height: 370px; margin: 0; padding: 29px 26px 13px; }
.nn-demo-script-panels .nn-demo-item { --item-spacing: 3px; min-height: 20px; }
.nn-demo-script-panels .nn-demo-item__editor { --item-size: 14px; }
.nn-demo-script-panels .nn-demo-item[data-level="0"] { --item-size: 16px; }
.nn-demo-script-panels .nn-demo-item[data-level="2"] { --item-size: 12px; }
.nn-demo-script-placeholder { width: 280px; }
.nn-demo-placeholder-handle { position: absolute; top: 2px; left: -16px; width: 14px; height: 20px; }
.nn-demo-panel-placeholder-handle { position: absolute; top: 3px; left: 4px; width: 22px; height: 22px; }
.nn-demo-script-ghost,.nn-demo-panel-ghost { display: none; position: absolute; top: 0; left: 0; z-index: 8; }
.nn-demo-script-ghost { --item-indent-step: 14px; --item-marker-track-size: 16px; --item-text-marker-gap: 2px; padding: 2px 7px; border-radius: 14px; background: color-mix(in srgb,var(--nn-accent) 10%,#fbfcfc); box-shadow: 0 8px 20px #233c4918; }
.nn-demo-script-ghost .nn-demo-item { margin-bottom: 3px; }
.nn-demo-script-ghost .nn-demo-item > .nn-demo-handle--item { position: absolute; }
.nn-demo-script-ghost .nn-demo-item[data-level="0"] { --item-size: 16px; }
.nn-demo-script-ghost .nn-demo-item[data-level="2"] { --item-size: 12px; }
.nn-demo-panel-ghost { width: 334px; }
.nn-demo-panel-ghost .nn-demo-panel { width: 334px; min-height: 370px; margin: 0; background: color-mix(in srgb,var(--nn-accent) 6%,#fff); box-shadow: 0 12px 28px #233c4922; }
.nn-demo-panel-placeholder { display: none; position: relative; flex: 0 0 334px; min-height: 370px; border-radius: 14px; background: color-mix(in srgb,var(--nn-muted) 8%,transparent); box-shadow: inset 0 2px 0 color-mix(in srgb,var(--nn-accent) 72%,transparent); }
.nn-demo-item.is-complete .nn-demo-item__editor { color: var(--nn-text); }
.nn-demo-item.is-complete .nn-demo-marker { color: var(--nn-accent); }
.nn-demo-drag-stage .nn-demo-placeholder { width: calc(100% - 14px); height: 28px; }
.nn-demo-drag-stage .nn-demo-item-ghost { top: 64px; right: 26px; left: 40px; width: auto; }
.nn-demo-drag-stage .nn-demo-cursor { top: 0; left: 0; }