body { margin:0; font-family: -apple-system, sans-serif; }
#test-instructions { padding: 24px; max-width: 560px; color: #444; }
      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        background: #ffffff;
        font-family:
          -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
          sans-serif;
        color: #2c2c2a;
        min-height: 100vh;
      }
      #widget-root {
        position: fixed;
        z-index: 1000;
        pointer-events: none;
      }
      #widget-root.corner-bottom-right {
        bottom: 24px;
        right: 24px;
      }
      #widget-root.corner-bottom-left {
        bottom: 24px;
        left: 24px;
      }
      #widget-root.corner-top-right {
        top: 24px;
        right: 24px;
      }
      #widget-root.corner-top-left {
        top: 24px;
        left: 24px;
      }

      .launcher {
        position: absolute;
        padding: var(--wt-btn-padding-y, 14px) var(--wt-btn-padding-x, 16px);
        border-radius: var(--wt-btn-radius, 14px);
        background: var(--wt-btn-bg, #faf9f6);
        border-style: solid;
        border-width: var(--wt-btn-border-width, 1px);
        border-color: var(--wt-btn-border-color, rgba(0, 0, 0, 0.1));
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
        display: flex;
        align-items: center;
        gap: 9px;
        cursor: pointer;
        white-space: nowrap;
        pointer-events: auto;
        opacity: 1;
        transform: scale(1);
        transition:
          opacity 0.25s ease,
          transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
          box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1),
          background-color 0.25s ease;
      }
      .launcher:hover {
        background: color-mix(in srgb, var(--wt-btn-bg, #faf9f6) 30%, white 70%);
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2);
        transform: scale(1.035);
      }
      /* Hover style presets -- selected via a class on #widget-root, chosen
         on the Embed page. "scale" (default) is the unconditional rule
         above; the rest override it. */
      #widget-root.hover-lift .launcher:hover {
        transform: translateY(-3px);
      }
      #widget-root.hover-glow .launcher:hover {
        background: var(--wt-btn-bg, #faf9f6);
        transform: none;
        box-shadow:
          0 0 0 4px rgba(29, 105, 224, 0.22),
          0 8px 24px rgba(0, 0, 0, 0.16);
      }
      #widget-root.hover-darken .launcher:hover {
        background: color-mix(in srgb, var(--wt-btn-bg, #faf9f6) 88%, black 12%);
        transform: none;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
      }
      #widget-root.hover-none .launcher:hover {
        background: var(--wt-btn-bg, #faf9f6);
        transform: none;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
      }
      #widget-root.hover-none .launcher:hover .launcher-label {
        color: rgba(0, 0, 0, 0.72);
      }
      #widget-root.hover-none .launcher:hover .launcher-dot {
        transform: none;
      }
      .launcher:active {
        transform: scale(0.98);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
      }
      .launcher-label {
        font-size: var(--wt-btn-font-size, 13px);
        font-weight: var(--wt-btn-font-weight, 600);
        letter-spacing: var(--wt-btn-letter-spacing, 0px);
        color: rgba(0, 0, 0, 0.72);
        font-family: var(
          --wt-btn-font-family,
          -apple-system,
          BlinkMacSystemFont,
          "Segoe UI",
          Helvetica,
          Arial,
          sans-serif
        );
        transition: color 0.25s ease;
      }
      .launcher:hover .launcher-label {
        color: rgba(0, 0, 0, 0.88);
      }
      .launcher-dot {
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        transform-box: fill-box;
        transform-origin: center;
      }
      .launcher:hover .launcher-dot {
        transform: scale(1.22);
      }
      #launcher-icon-emoji {
        font-size: 16px;
        line-height: 1;
      }
      #widget-root.expanded .launcher {
        opacity: 0;
        transform: scale(0.5);
        pointer-events: none;
      }

      /* Used when the site owner supplies their own trigger element instead
         of the built-in launcher pill. */
      #widget-root.hide-launcher .launcher {
        display: none !important;
      }

      #widget-root.corner-bottom-right .launcher,
      #widget-root.corner-bottom-right .panel-expanded {
        bottom: 0;
        right: 0;
        transform-origin: bottom right;
      }
      #widget-root.corner-bottom-left .launcher,
      #widget-root.corner-bottom-left .panel-expanded {
        bottom: 0;
        left: 0;
        transform-origin: bottom left;
      }
      #widget-root.corner-top-right .launcher,
      #widget-root.corner-top-right .panel-expanded {
        top: 0;
        right: 0;
        transform-origin: top right;
      }
      #widget-root.corner-top-left .launcher,
      #widget-root.corner-top-left .panel-expanded {
        top: 0;
        left: 0;
        transform-origin: top left;
      }

      .panel-expanded {
        position: absolute;
        width: 460px;
        height: 560px;
        border-radius: var(--wt-radius, 24px);
        overflow: hidden;
        box-shadow: var(--wt-shadow, 0 20px 60px rgba(0, 0, 0, 0.25));
        opacity: 0;
        transform: scale(0.94);
        filter: blur(6px);
        pointer-events: none;
        transition:
          opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1),
          transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
          filter 0.3s ease;
      }
      #widget-root.expanded .panel-expanded {
        opacity: 1;
        transform: scale(1);
        filter: blur(0px);
        pointer-events: auto;
      }

      /* Inline embed mode: no floating corner overlay, no launcher, always
         open, fills whatever element contains it. */
      #widget-root.mode-inline {
        position: static;
        width: 100%;
        height: 100%;
        display: block;
      }
      #widget-root.mode-inline .launcher,
      #widget-root.mode-inline #widget-close-btn {
        display: none !important;
      }
      #widget-root.mode-inline .panel-expanded {
        position: static;
        width: 100%;
        height: 100%;
        opacity: 1;
        transform: none;
        filter: none;
        pointer-events: auto;
        transition: none;
      }

      /* Inline mode never shows any resize UI — it's meant to fill
         whatever container the host page gives it, so manually resizing
         away from that doesn't apply. */
      #widget-root.mode-inline #resize-handle,
      #widget-root.mode-inline #resize-toggle-btn {
        display: none !important;
      }

      @media (max-width: 480px) {
        .panel-expanded {
          height: calc(100vh - 32px);
          border-radius: 16px 16px 0 0;
        }
        #widget-root.corner-bottom-right .panel-expanded,
        #widget-root.corner-bottom-left .panel-expanded,
        #widget-root.corner-top-right .panel-expanded,
        #widget-root.corner-top-left .panel-expanded {
          position: fixed;
          left: 0;
          right: 0;
          width: 100vw;
        }
        #widget-root.corner-bottom-right .panel-expanded,
        #widget-root.corner-bottom-left .panel-expanded {
          bottom: 16px;
          top: auto;
        }
        #widget-root.corner-top-right .panel-expanded,
        #widget-root.corner-top-left .panel-expanded {
          top: 16px;
          bottom: auto;
        }
        #resize-handle {
          display: none !important;
        }
      }

      .corner {
        display: none;
      }
      .corner.tl {
        top: 8px;
        left: 8px;
        border-right: none;
        border-bottom: none;
      }
      .corner.tr {
        top: 8px;
        right: 8px;
        border-left: none;
        border-bottom: none;
      }
      .corner.bl {
        bottom: 8px;
        left: 8px;
        border-right: none;
        border-top: none;
      }
      .corner.br {
        bottom: 8px;
        right: 8px;
        border-left: none;
        border-top: none;
      }
      #dot-highlight-layer {
        opacity: 0;
        transition: opacity 0.3s ease-out;
        -webkit-mask-image: radial-gradient(
          circle 90px at var(--mx, -9999px) var(--my, -9999px),
          black,
          transparent 100%
        );
        mask-image: radial-gradient(
          circle 90px at var(--mx, -9999px) var(--my, -9999px),
          black,
          transparent 100%
        );
      }
      .proto-btn {
        transition: background 0.15s ease;
      }
      .proto-btn:hover {
        opacity: 0.85;
      }
      #ring-app .person {
        transition:
          transform 0.15s ease,
          opacity 0.2s ease,
          filter 0.25s ease;
      }
      #ring-app .person:hover .avatar-fo div {
        filter: brightness(1.08) drop-shadow(0 3px 8px rgba(0, 0, 0, 0.28));
      }
      .profile-link {
        transition: background 0.15s ease;
        border-radius: 6px;
        padding-left: 6px;
        margin-left: -6px;
      }
      #panel-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.16);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.35s ease;
        z-index: 1;
      }
      #panel-backdrop.show {
        opacity: 1;
        pointer-events: auto;
        cursor: pointer;
      }
      #hover-card {
        opacity: 0;
        transform: translateY(4px) scale(0.97);
        transition:
          opacity 0.18s ease,
          transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
      }
      #hover-card.show {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
      .dither-dot {
        opacity: 0;
        transform-box: fill-box;
        transform-origin: center;
      }
      @media (prefers-reduced-motion: no-preference) {
        .person:hover .dither-dot {
          animation: ditherPop 900ms ease-out infinite;
        }
      }
      @keyframes ditherPop {
        0% {
          opacity: 0;
          transform: translate(0, 0) scale(0.5);
        }
        30% {
          opacity: 0.95;
        }
        100% {
          opacity: 0;
          transform: translate(var(--ex), var(--ey)) scale(1);
        }
      }
      .edge-path {
        transition:
          opacity 0.25s ease,
          stroke-width 0.2s ease;
      }
      .edge-data {
        opacity: 0;
        transition: opacity 0.3s ease;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 3px;
      }
      .edge.active .edge-data {
        opacity: 0.85;
      }
      .edge-marker {
        transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
        transform-box: fill-box;
        transform-origin: center;
      }
      .edge.active .edge-marker {
        transform: scale(1.5) rotate(45deg);
      }
      #ring-app text.label {
        paint-order: stroke;
        stroke-linejoin: round;
        stroke-width: 3px;
      }
      @media (prefers-reduced-motion: no-preference) {
        .edge.active .edge-data {
          animation: dataFlow 1s linear infinite;
        }
      }
      @keyframes dataFlow {
        to {
          stroke-dashoffset: -13;
        }
      }
      @media (prefers-reduced-motion: no-preference) {
        .ring-focused {
          animation: ringPulse 2.2s ease-in-out infinite;
        }
        .thumb-pulse {
          animation: thumbPulse 1.8s ease-in-out infinite;
          transform-box: fill-box;
          transform-origin: center;
        }
      }
      @keyframes ringPulse {
        0%,
        100% {
          stroke-opacity: 0.35;
        }
        50% {
          stroke-opacity: 0.7;
        }
      }
      @keyframes thumbPulse {
        0%,
        100% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.15);
        }
      }
      .font-mono-fallback {
        font-family:
          "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      }
      .wm-label {
        font-family: "Space Mono", ui-monospace, Menlo, monospace;
        font-size: 9.5px;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }
      .wm-pill {
        display: inline-block;
        width: 6px;
        height: 20px;
        border-radius: 99px;
        vertical-align: middle;
        position: relative;
        flex-shrink: 0;
      }
      .wm-pill::after {
        content: "";
        position: absolute;
        left: -1.5px;
        right: -1.5px;
        top: 38%;
        height: 2px;
        background: #1c1c1a;
        border-radius: 2px;
      }
      .wm-dark .wm-pill::after {
        background: #f1efe8;
      }
      .wm-dots {
        display: inline-flex;
        gap: 5px;
        align-items: center;
      }
      .wm-dots span {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        display: inline-block;
      }

      #canvas-links {
        position: absolute;
        bottom: 12px;
        right: 14px;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 7px;
        pointer-events: none;
      }
      .page-link {
        display: flex;
        align-items: center;
        gap: 6px;
        pointer-events: none;
        font-family: "Space Mono", ui-monospace, Menlo, monospace;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        text-decoration: none;
        color: var(--link-color, #5f5e5a);
        border-bottom: 1px solid transparent;
        padding-bottom: 1px;
        transition:
          color 0.2s ease,
          border-color 0.2s ease;
      }
      .page-link svg {
        flex-shrink: 0;
      }
      .page-link:hover {
        color: var(--link-hover-color, #2c2c2a);
        border-bottom-color: var(--link-hover-color, #2c2c2a);
      }
      #widget-root.expanded .page-link {
        pointer-events: auto;
      }
      #add-owner-btn {
        display: none;
      }