#ac-circa-root,
.ac-circa-welcome {
  --ac-circa-ready: 1;
  --ac-circa-forest: #103c2d;
  --ac-circa-forest-deep: #092d22;
  --ac-circa-green: #247548;
  --ac-circa-mint: #e9f5ed;
  --ac-circa-cream: #fffaf0;
  --ac-circa-paper: #fffef9;
  --ac-circa-ochre: #9a5b12;
  --ac-circa-ink: #13201a;
  --ac-circa-muted: #5f6f67;
  --ac-circa-line: rgba(16, 60, 45, 0.16);
  --ac-circa-shadow: 0 22px 60px rgba(9, 45, 34, 0.2);
  color: var(--ac-circa-ink);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#ac-circa-root *,
.ac-circa-welcome * {
  box-sizing: border-box;
}

#ac-circa-root[hidden],
#ac-circa-root [hidden],
.ac-circa-welcome[hidden] {
  display: none !important;
}

.ac-circa-welcome {
  position: relative;
  display: grid;
  grid-template-columns: minmax(116px, 148px) minmax(0, 1fr);
  gap: 20px;
  margin: 0 0 18px;
  padding: 22px;
  overflow: hidden;
  border: 1px solid var(--ac-circa-line);
  border-radius: 24px;
  background:
    radial-gradient(circle at 2% 10%, rgba(111, 191, 143, 0.22), transparent 34%),
    linear-gradient(135deg, var(--ac-circa-paper), var(--ac-circa-cream));
  box-shadow: 0 14px 34px rgba(16, 60, 45, 0.1);
}

.ac-circa-welcome::after {
  position: absolute;
  right: -62px;
  bottom: -72px;
  width: 190px;
  height: 190px;
  border: 20px solid rgba(46, 139, 87, 0.07);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.ac-circa-welcome__media {
  position: relative;
  z-index: 1;
  display: grid;
  height: 194px;
  min-height: 176px;
  place-items: end center;
  align-self: start;
  border: 1px solid rgba(46, 139, 87, 0.14);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(230, 242, 234, 0.72));
}

.ac-circa-welcome__media::before {
  position: absolute;
  inset: 14px;
  border: 1px dashed rgba(46, 139, 87, 0.2);
  border-radius: 50%;
  content: "";
}

.ac-circa-welcome__media--failed {
  display: none;
}

.ac-circa-welcome--image-failed {
  grid-template-columns: minmax(0, 1fr);
}

.ac-circa-welcome__image {
  position: relative;
  z-index: 1;
  display: block;
  /* Explicit width, not auto. With width:auto the box has no intrinsic size
     until the file loads, so it computed to 0px wide - and loading="lazy"
     never fires for a zero-area element, so the file never loaded and the
     width stayed 0. Circa simply did not appear on the welcome card.
     132x186 matches the artwork's 336x472 ratio, so reserving the box also
     removes the layout shift when it does arrive. */
  width: 132px;
  max-width: 132px;
  height: 186px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 12px 12px rgba(9, 45, 34, 0.16));
}

.ac-circa-welcome__content {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.ac-circa-eyebrow {
  margin: 0 0 7px;
  color: var(--ac-circa-green);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ac-circa-welcome__title,
.ac-circa-panel__title {
  margin: 0;
  color: var(--ac-circa-forest);
  font-family: Manrope, Inter, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.ac-circa-welcome__title {
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.12;
}

.ac-circa-welcome__body {
  max-width: 850px;
  margin: 9px 0 0;
  color: var(--ac-circa-muted);
  font-size: 14px;
  line-height: 1.6;
}

.ac-circa-trust-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 11px;
  padding: 7px 10px;
  border: 1px solid rgba(46, 139, 87, 0.16);
  border-radius: 999px;
  background: rgba(233, 245, 237, 0.82);
  color: var(--ac-circa-forest);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
}

.ac-circa-trust-note::before {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--ac-circa-green);
  box-shadow: 0 0 0 4px rgba(46, 139, 87, 0.12);
  content: "";
}

.ac-circa-guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.ac-circa-guide-card {
  display: flex;
  min-width: 0;
  min-height: 150px;
  flex-direction: column;
  align-items: flex-start;
  padding: 13px;
  border: 1px solid var(--ac-circa-line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
}

.ac-circa-guide-card__number {
  display: grid;
  width: 26px;
  height: 26px;
  margin-bottom: 9px;
  place-items: center;
  border-radius: 50%;
  background: var(--ac-circa-forest);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.ac-circa-guide-card__title {
  margin: 0;
  color: var(--ac-circa-forest);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.3;
}

.ac-circa-guide-card__body {
  margin: 6px 0 12px;
  color: var(--ac-circa-muted);
  font-size: 11px;
  line-height: 1.48;
}

.ac-circa-guide-card .ac-circa-btn {
  margin-top: auto;
}

.ac-circa-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  margin-top: 16px;
}

.ac-circa-btn {
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 10px 13px;
  background: var(--ac-circa-forest);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.ac-circa-btn:hover {
  background: var(--ac-circa-forest-deep);
  box-shadow: 0 8px 18px rgba(9, 45, 34, 0.15);
  transform: translateY(-1px);
}

.ac-circa-btn--secondary {
  border-color: var(--ac-circa-line);
  background: #fff;
  color: var(--ac-circa-forest);
}

.ac-circa-btn--secondary:hover {
  background: var(--ac-circa-mint);
}

.ac-circa-btn--quiet {
  border-color: transparent;
  background: transparent;
  color: var(--ac-circa-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ac-circa-btn--quiet:hover {
  background: rgba(233, 245, 237, 0.68);
  color: var(--ac-circa-forest);
  box-shadow: none;
}

.ac-circa-btn--small {
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 11px;
}

.ac-circa-btn:focus-visible,
.ac-circa-launcher:focus-visible,
.ac-circa-panel__close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--ac-circa-forest);
}

#ac-circa-root {
  position: relative;
  z-index: 44;
}

.ac-circa-launcher {
  position: fixed;
  right: 22px;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  z-index: 44;
  display: grid;
  grid-template-columns: 48px auto;
  min-width: 132px;
  min-height: 64px;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  padding: 4px 15px 4px 7px;
  background: linear-gradient(145deg, #14523d, #092d22);
  color: #fff;
  box-shadow: var(--ac-circa-shadow);
  font: inherit;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.ac-circa-launcher:hover {
  box-shadow: 0 25px 64px rgba(9, 45, 34, 0.28);
  transform: translateY(-2px);
}

/* Compact when idle, above the mobile breakpoint.
 *
 * At full size the launcher is 170x64 and fixed to the bottom-right, which put
 * it directly on top of the "Select Folder" button on the Upload tab at a
 * 1536x729 viewport - hit-testing confirmed the button could not be clicked at
 * the default scroll position. A permanently-parked 170px pill will always
 * collide with something eventually; shrinking it to the portrait alone cuts
 * the footprint by about 70% and it still reads as a help affordance.
 *
 * Mobile already did exactly this below 680px, so this reuses that pattern
 * rather than inventing a second one - the difference is only that here it
 * expands again on hover and on keyboard focus.
 *
 * The label is clipped, not removed: clip-path leaves it in the accessibility
 * tree, so the button keeps its accessible name for screen readers. */
@media (min-width: 681px) {
  .ac-circa-launcher {
    grid-template-columns: 48px;
    min-width: 62px;
    width: 62px;
    padding: 4px 7px;
    transition: width 180ms ease, min-width 180ms ease, padding 180ms ease,
      transform 180ms ease, box-shadow 180ms ease;
  }

  .ac-circa-launcher__copy {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .ac-circa-launcher:hover,
  .ac-circa-launcher:focus-visible,
  .ac-circa-launcher[aria-expanded='true'] {
    grid-template-columns: 48px auto;
    width: auto;
    min-width: 132px;
    padding: 4px 15px 4px 7px;
  }

  .ac-circa-launcher:hover .ac-circa-launcher__copy,
  .ac-circa-launcher:focus-visible .ac-circa-launcher__copy,
  .ac-circa-launcher[aria-expanded='true'] .ac-circa-launcher__copy {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }
}

@media (min-width: 681px) and (prefers-reduced-motion: reduce) {
  .ac-circa-launcher {
    transition: none;
  }
}

.ac-circa-launcher[aria-expanded="true"] {
  background: var(--ac-circa-ochre);
}

.ac-circa-launcher__portrait {
  display: grid;
  width: 48px;
  height: 54px;
  place-items: center;
  overflow: hidden;
}

.ac-circa-launcher__image {
  display: block;
  /* The WebP has about 7px of transparent breathing room at launcher scale.
     A 48x68 box removes only that transparency inside the 48x54 window; the
     complete character, including her curl and feet, remains visible. */
  width: 48px;
  max-width: none;
  height: 68px;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.22));
}

.ac-circa-launcher__copy {
  display: grid;
  gap: 1px;
  text-align: left;
}

.ac-circa-launcher__copy strong {
  font-size: 13px;
  line-height: 1.1;
}

.ac-circa-launcher__copy span {
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.ac-circa-panel {
  position: fixed;
  right: 22px;
  bottom: calc(98px + env(safe-area-inset-bottom, 0px));
  z-index: 44;
  width: min(420px, calc(100vw - 32px));
  max-height: min(620px, calc(100dvh - 190px));
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--ac-circa-line);
  border-radius: 22px;
  background: rgba(255, 254, 249, 0.98);
  box-shadow: var(--ac-circa-shadow);
  scrollbar-color: rgba(46, 139, 87, 0.54) transparent;
  scrollbar-width: thin;
  animation: ac-circa-panel-in 180ms ease-out both;
}

.ac-circa-panel::-webkit-scrollbar {
  width: 8px;
}

.ac-circa-panel::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(46, 139, 87, 0.54);
  background-clip: padding-box;
}

.ac-circa-panel__header {
  position: relative;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 44px;
  gap: 11px;
  align-items: center;
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--ac-circa-line);
  background:
    radial-gradient(circle at 12% 20%, rgba(111, 191, 143, 0.26), transparent 38%),
    linear-gradient(135deg, #f8fff9, var(--ac-circa-cream));
}

.ac-circa-panel__header--image-failed {
  grid-template-columns: minmax(0, 1fr) 44px;
}

.ac-circa-panel__portrait {
  display: grid;
  width: 76px;
  height: 86px;
  place-items: end center;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.66);
}

.ac-circa-panel__image {
  display: block;
  width: 74px;
  height: 86px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 7px 8px rgba(9, 45, 34, 0.16));
}

.ac-circa-panel__title {
  font-size: 20px;
  line-height: 1.15;
}

.ac-circa-panel__title:focus {
  outline: none;
}

.ac-circa-panel__heading:focus {
  outline: 2px solid var(--ac-circa-green);
  outline-offset: 4px;
  border-radius: 4px;
}

.ac-circa-panel__meta {
  margin-top: 4px;
  color: var(--ac-circa-muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.ac-circa-panel__close {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  align-self: start;
  border: 1px solid var(--ac-circa-line);
  border-radius: 50%;
  background: #fff;
  color: var(--ac-circa-forest);
  font: inherit;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
}

.ac-circa-panel__body {
  padding: 16px;
}

.ac-circa-panel__progress {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
  color: var(--ac-circa-green);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ac-circa-panel__heading {
  margin: 0;
  color: var(--ac-circa-forest);
  font-family: Manrope, Inter, system-ui, sans-serif;
  font-size: 21px;
  line-height: 1.2;
}

.ac-circa-panel__copy {
  margin: 9px 0 0;
  color: var(--ac-circa-muted);
  font-size: 13px;
  line-height: 1.58;
}

.ac-circa-panel__tips {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.ac-circa-panel__tips li {
  position: relative;
  padding-left: 22px;
  color: var(--ac-circa-ink);
  font-size: 12px;
  line-height: 1.45;
}

.ac-circa-panel__tips li::before {
  position: absolute;
  top: 0.18em;
  left: 0;
  display: grid;
  width: 15px;
  height: 15px;
  place-items: center;
  border-radius: 50%;
  background: var(--ac-circa-mint);
  color: var(--ac-circa-green);
  content: "✓";
  font-size: 10px;
  font-weight: 900;
}

.ac-circa-panel__limit {
  margin-top: 14px;
  padding: 11px 12px;
  border: 1px solid rgba(191, 122, 42, 0.22);
  border-radius: 13px;
  background: #fff8e8;
  color: #684714;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.48;
}

.ac-circa-panel__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 15px;
}

.ac-circa-panel__utility {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--ac-circa-line);
}

.ac-circa-panel__safety {
  color: var(--ac-circa-muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
}

@keyframes ac-circa-panel-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 920px) {
  .ac-circa-guide-grid {
    grid-template-columns: 1fr;
  }

  .ac-circa-guide-card {
    min-height: 0;
  }
}

@media (max-width: 680px) {
  .ac-circa-welcome {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px;
    border-radius: 20px;
  }

  .ac-circa-welcome__media {
    width: 100%;
    height: 122px;
    min-height: 112px;
  }

  .ac-circa-welcome__image {
    max-width: 96px;
    height: 116px;
  }

  .ac-circa-actions {
    align-items: stretch;
  }

  .ac-circa-actions .ac-circa-btn {
    width: 100%;
  }

  .ac-circa-launcher {
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    grid-template-columns: 48px;
    min-width: 62px;
    width: 62px;
    height: 62px;
    padding: 4px 7px;
  }

  .ac-circa-launcher__copy {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .ac-circa-panel {
    right: 12px;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    left: 12px;
    width: auto;
    max-height: min(
      560px,
      calc(100dvh - 180px - env(safe-area-inset-bottom, 0px))
    );
    border-radius: 18px;
  }

  .ac-circa-panel__header {
    grid-template-columns: 62px minmax(0, 1fr) 44px;
  }

  .ac-circa-panel__portrait {
    width: 62px;
    height: 72px;
  }

  .ac-circa-panel__image {
    width: 60px;
    height: 72px;
  }

  .ac-circa-panel__title {
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #ac-circa-root *,
  .ac-circa-welcome * {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}

@media (forced-colors: active) {
  .ac-circa-btn,
  .ac-circa-launcher,
  .ac-circa-panel,
  .ac-circa-welcome {
    border: 1px solid CanvasText;
  }
}

@media print {
  #ac-circa-root,
  .ac-circa-welcome {
    display: none !important;
  }
}