html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
  }

  #app {
    height: 100%;
  }

  .app.svelte-6tulgq {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--color-background);
    color: var(--color-text);
    font-family: 'Rethink Sans', 'Inter', var(--font-sans);
    font-weight: 400;
  }

  .app--loading.svelte-6tulgq {
    align-items: center;
    justify-content: center;
    background: transparent;
    position: relative;
    z-index: 1;
  }

  .loading-text.svelte-6tulgq {
    font-size: 13px;
    color: rgba(255,255,255,0.8);
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
    animation: svelte-6tulgq-loading-text-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .loading-spinner {
    color: rgba(255,255,255,0.7);
    margin: 12px 0 4px;
  }

  @keyframes svelte-6tulgq-loading-text-in {
    from { opacity: 0; filter: blur(6px); transform: translateY(8px); }
    to { opacity: 1; filter: blur(0); transform: translateY(0); }
  }

  .app__canvas.svelte-6tulgq {
    flex: 1;
    min-height: 0;
    overflow: visible;
    position: relative;
  }

  .app__canvas.svelte-6tulgq .svelte-flow { background: transparent; }

  .app__canvas.svelte-6tulgq .svelte-flow__node {
    background: var(--color-surface);
    border-radius: var(--radius-xl, 16px);
    box-shadow: var(--shadow-lg);
    border: none;
    padding: 0;
    overflow: visible;
  }

  .app__canvas.svelte-6tulgq .svelte-flow__node.selected {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 15%, transparent), var(--shadow-lg);
  }

  .app__canvas.svelte-6tulgq .svelte-flow__node-layoutGroup,
  .app__canvas.svelte-6tulgq .svelte-flow__node-layoutGroup.selected {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
  }
  .app__canvas.svelte-6tulgq .svelte-flow__node.type-layoutGroup,
  .app__canvas.svelte-6tulgq .svelte-flow__node.type-layoutGroup.selected {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
  }

  .app__canvas.svelte-6tulgq .svelte-flow__node .svelte-flow__resize-control {
    border: none;
    background: none;
  }

  .app__canvas.svelte-6tulgq .svelte-flow__node .svelte-flow__resize-control.handle {
    width: 12px;
    height: 12px;
    border-radius: 0 0 var(--radius-xl, 16px) 0;
  }

  .app__canvas.svelte-6tulgq .svelte-flow__background {
    opacity: 0.3;
  }

  /* SvelteFlow injects a screen-reader-only description div with
     class `a11y-hidden` — its `display: none` rule is scoped via a
     Svelte hash selector that doesn't match our deployed output, so
     the plain `.a11y-hidden` ends up visible. Force-hide globally. */
  .a11y-hidden { display: none !important; }

  /* Attention highlight — AI flags nodes the user should notice.
     Subtle pulsing ring + tint; respects reduced-motion preference. */
  .app__canvas.svelte-6tulgq .svelte-flow__node.attention {
    animation: svelte-6tulgq-attention-pulse 1.8s ease-in-out infinite;
    box-shadow:
      0 0 0 2px var(--color-primary),
      0 0 24px 4px color-mix(in srgb, var(--color-primary) 55%, transparent),
      var(--shadow-lg);
  }
  @keyframes svelte-6tulgq-attention-pulse {
    0%, 100% {
      box-shadow:
        0 0 0 2px color-mix(in srgb, var(--color-primary) 60%, transparent),
        0 0 18px 2px color-mix(in srgb, var(--color-primary) 30%, transparent),
        var(--shadow-lg);
    }
    50% {
      box-shadow:
        0 0 0 3px var(--color-primary),
        0 0 28px 6px color-mix(in srgb, var(--color-primary) 55%, transparent),
        var(--shadow-lg);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .app__canvas.svelte-6tulgq .svelte-flow__node.attention { animation: none; }
  }

  .svelte-flow__minimap {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 194px;
    height: 111px;
    border-radius: 0;
    border: none;
    background: transparent !important;
    box-shadow: none;
    overflow: hidden;
    pointer-events: auto;
  }