:root {
  --background: 0 0% 100%;
  --foreground: 0 0% 10%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 10%;
  --card-hover: 0 0% 98%;
  --brand-primary: 217 91% 51%;
  --brand-primary-hover: 217 91% 45%;
  --brand-primary-light: 217 91% 96%;
  --primary: 217 91% 51%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 96%;
  --secondary-foreground: 0 0% 10%;
  --muted: 0 0% 96%;
  --muted-foreground: 0 0% 45%;
  --accent: 217 91% 96%;
  --accent-foreground: 217 91% 51%;
  --destructive: 0 84% 60%;
  --border: 0 0% 90%;
  --border-hover: 0 0% 80%;
  --input: 0 0% 90%;
  --ring: 217 91% 51%;
  --status-analysis: 217 91% 51%;
  --status-analysis-bg: 217 91% 96%;
  --status-analysis-border: 217 91% 85%;
  --status-review: 25 95% 53%;
  --status-review-bg: 25 95% 96%;
  --status-review-border: 25 95% 85%;
  --status-participate: 142 76% 36%;
  --status-participate-bg: 142 76% 96%;
  --status-participate-border: 142 76% 85%;
  --status-no-participate: 0 84% 60%;
  --status-no-participate-bg: 0 84% 96%;
  --status-no-participate-border: 0 84% 85%;
  --status-won: 271 91% 65%;
  --status-won-bg: 271 91% 96%;
  --status-won-border: 271 91% 85%;
  --shadow-sm: 0 1px 3px 0 hsl(0 0% 0% / .06), 0 1px 2px 0 hsl(0 0% 0% / .04);
  --shadow-md: 0 4px 6px -1px hsl(0 0% 0% / .08), 0 2px 4px -1px hsl(0 0% 0% / .04);
  --shadow-lg: 0 10px 15px -3px hsl(0 0% 0% / .1), 0 4px 6px -2px hsl(0 0% 0% / .05);
  --radius: 8px;
  --radius-sm: 6px;
  --radius-lg: 12px;
  --transition-fast: .15s cubic-bezier(.4, 0, .2, 1);
  --transition-base: .25s cubic-bezier(.4, 0, .2, 1);
  --transition-smooth: .4s cubic-bezier(.4, 0, .6, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

button,
input {
  font: inherit;
}

.app-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 100vh;
  transition: grid-template-columns var(--transition-base);
}

.app-shell:has(.sidebar.is-collapsed) {
  grid-template-columns: 72px minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 100vh;
  border-right: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  padding: 18px 12px;
  overflow: auto;
  transition: width var(--transition-base), padding var(--transition-base);
}

.sidebar.is-collapsed {
  width: 72px;
  padding-inline: 10px;
  overflow: visible;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: hsl(var(--foreground));
  text-decoration: none;
  margin: 0 6px 18px;
  padding: 8px 6px;
}

.sidebar.is-collapsed .brand {
  justify-content: center;
  margin-inline: 0;
}

.sidebar.is-collapsed .brand span:last-child,
.sidebar.is-collapsed .module-nav a span:last-child,
.sidebar.is-collapsed .sidebar-toggle span {
  display: none;
}

.brand-mark {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: hsl(var(--foreground));
  color: hsl(var(--background));
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}

.brand strong,
.brand small {
  display: block;
}

.brand strong {
  font-size: 15px;
  font-weight: 700;
}

.brand small {
  color: hsl(var(--muted-foreground));
  font-size: 12px;
}

.sidebar-toggle {
  width: calc(100% - 12px);
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 6px 14px;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  background: hsl(var(--card));
  color: hsl(var(--muted-foreground));
  font-weight: 700;
  cursor: pointer;
}

.sidebar-toggle:hover,
.sidebar-toggle:focus-visible {
  background: hsl(var(--secondary));
  color: hsl(var(--foreground));
  outline: none;
}

.sidebar.is-collapsed .sidebar-toggle {
  width: 40px;
  margin-inline: auto;
}

.module-nav {
  display: grid;
  gap: 4px;
}

.module-nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: hsl(var(--foreground));
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.module-nav a:hover,
.module-nav a:focus-visible,
.module-nav a.active {
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
  outline: none;
}

.sidebar.is-collapsed .module-nav a {
  justify-content: center;
  padding-inline: 0;
}

.sidebar.is-collapsed .module-nav a::before,
.sidebar.is-collapsed .module-nav a::after {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}

.sidebar.is-collapsed .module-nav a::before {
  content: "";
  width: 8px;
  height: 8px;
  background: hsl(var(--card));
  border-left: 1px solid hsl(var(--border));
  border-bottom: 1px solid hsl(var(--border));
  transform: translate(2px, -50%) rotate(45deg);
}

.sidebar.is-collapsed .module-nav a::after {
  content: attr(data-label);
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 240px;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  box-shadow: var(--shadow-md);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  transform: translate(8px, -50%);
}

.sidebar.is-collapsed .module-nav a:hover::before,
.sidebar.is-collapsed .module-nav a:hover::after,
.sidebar.is-collapsed .module-nav a.is-tooltip-visible::before,
.sidebar.is-collapsed .module-nav a.is-tooltip-visible::after,
.sidebar.is-collapsed .module-nav a:focus-visible::before,
.sidebar.is-collapsed .module-nav a:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

.sidebar.is-collapsed .module-nav a:hover::before,
.sidebar.is-collapsed .module-nav a.is-tooltip-visible::before,
.sidebar.is-collapsed .module-nav a:focus-visible::before {
  transform: translate(0, -50%) rotate(45deg);
}

.sidebar.is-collapsed .module-nav a:hover::after,
.sidebar.is-collapsed .module-nav a.is-tooltip-visible::after,
.sidebar.is-collapsed .module-nav a:focus-visible::after {
  transform: translate(4px, -50%);
}

.nav-icon,
.module-icon,
[data-icon]::before {
  width: 16px;
  height: 16px;
  background: currentColor;
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  mask: var(--icon) center / contain no-repeat;
  -webkit-mask: var(--icon) center / contain no-repeat;
}

.nav-icon {
  color: hsl(var(--muted-foreground));
}

.content {
  min-width: 0;
  background: hsl(var(--background));
  padding: 0 28px 64px;
}

.home-view {
  max-width: 1040px;
  margin: 0 auto;
  padding: 54px 0 72px;
}

.home-brand {
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 auto 34px;
}

.home-brand strong,
.home-brand small {
  display: block;
}

.home-brand strong {
  font-size: 32px;
  line-height: 38px;
}

.home-brand small {
  color: hsl(var(--muted-foreground));
  font-size: 20px;
}

.home-mark {
  width: 74px;
  height: 74px;
  border-radius: 12px;
  font-size: 56px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: hsl(var(--accent-foreground));
  background: hsl(var(--accent));
  border: 1px solid hsl(var(--status-analysis-border));
  border-radius: 999px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
}

h1,
h2,
h3 {
  margin: 0;
  letter-spacing: 0;
}

h1 {
  margin-top: 14px;
  font-size: 36px;
  line-height: 40px;
  font-weight: 700;
}

h2 {
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
}

h3 {
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
}

p {
  margin: 0;
  color: hsl(var(--muted-foreground));
}

.status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border: 1px solid;
  border-radius: 999px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 700;
}

.status-analysis {
  background: hsl(var(--status-analysis-bg));
  border-color: hsl(var(--status-analysis-border));
  color: hsl(var(--status-analysis));
}

.status-review {
  background: hsl(var(--status-review-bg));
  border-color: hsl(var(--status-review-border));
  color: hsl(var(--status-review));
}

.status-participate {
  background: hsl(var(--status-participate-bg));
  border-color: hsl(var(--status-participate-border));
  color: hsl(var(--status-participate));
}

.status-warning {
  background: hsl(var(--status-no-participate-bg));
  border-color: hsl(var(--status-no-participate-border));
  color: hsl(var(--status-no-participate));
}

.home-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  margin: 0 auto 28px;
}

.search-results {
  grid-column: 1 / -1;
  display: none;
}

.search-results.open {
  display: grid;
  gap: 10px;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
  box-shadow: var(--shadow-sm);
  padding: 14px;
}

.search-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid hsl(var(--border));
}

.search-results-header strong {
  font-size: 14px;
}

.search-results-header span {
  color: hsl(var(--muted-foreground));
  font-size: 12px;
}

.search-results-list {
  display: grid;
  gap: 8px;
}

.search-result {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 10px;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  text-align: left;
  padding: 12px;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.search-result:hover,
.search-result:focus-visible {
  border-color: hsl(var(--status-analysis-border));
  background: hsl(var(--brand-primary-light));
  box-shadow: var(--shadow-sm);
  outline: none;
}

.search-result-type {
  grid-row: span 3;
  align-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border: 1px solid hsl(var(--status-analysis-border));
  border-radius: 999px;
  background: hsl(var(--brand-primary-light));
  color: hsl(var(--brand-primary));
  padding: 0 8px;
  font-size: 11px;
  font-weight: 700;
}

.search-result strong {
  font-size: 14px;
}

.search-result small {
  color: hsl(var(--muted-foreground));
  font-size: 12px;
}

.search-result p {
  font-size: 12px;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 68px;
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius);
  padding: 0 22px;
  background: hsl(var(--card));
  color: hsl(var(--muted-foreground));
  box-shadow: var(--shadow-md);
}

.search-box:focus-within {
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 3px hsl(var(--ring) / .14);
}

.search-box input {
  width: 100%;
  border: 0;
  outline: 0;
  color: hsl(var(--foreground));
  background: transparent;
  font-size: 18px;
}

.home-faq,
.module-overview {
  margin-top: 28px;
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 24px 0 14px;
}

.section-heading p {
  margin-top: 4px;
}

.section-heading.compact {
  margin-top: 4px;
}

.section-heading h2 {
  margin-top: 8px;
}

.module-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.overview-card {
  min-height: 148px;
  display: grid;
  align-content: start;
  gap: 10px;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
  box-shadow: var(--shadow-sm);
  color: hsl(var(--foreground));
  text-align: left;
  padding: 16px;
  cursor: pointer;
  transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.overview-card:hover,
.overview-card:focus-visible {
  background: hsl(var(--card-hover));
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  outline: none;
}

.overview-card .module-icon-wrap {
  width: 36px;
  height: 36px;
}

.overview-card strong {
  font-size: 15px;
}

.overview-card p {
  font-size: 12px;
}

.module-card,
.faq-section {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
  box-shadow: var(--shadow-sm);
}

.module-card {
  display: grid;
  gap: 18px;
  padding: 20px;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.detail-view {
  max-width: 1180px;
  margin: 0 auto;
  padding: 26px 0 72px;
}

.back-home {
  margin-bottom: 16px;
}

.visual-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.visual-card {
  display: grid;
  gap: 8px;
  margin: 0;
}

.guide-step > .visual-card,
.guide-step > .micro-demo {
  width: min(100%, 980px);
  margin-left: 44px;
}

.visual-card.compact {
  width: min(100%, 860px);
}

.visual-card figcaption {
  display: none;
}

.module-screenshot {
  display: block;
  width: 100%;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--muted));
  height: auto;
  object-fit: contain;
  box-shadow: var(--shadow-sm);
}

.visual-card.compact .module-screenshot {
  max-height: 420px;
  object-fit: contain;
  object-position: top left;
}

.micro-demo {
  display: grid;
  gap: 8px;
  margin: 0;
}

.micro-demo-viewport {
  position: relative;
  overflow: hidden;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--muted));
  box-shadow: var(--shadow-sm);
  isolation: isolate;
}

.micro-demo-image {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: var(--origin-x) var(--origin-y);
  animation: demoZoom 4.6s cubic-bezier(.4, 0, .2, 1) 2 both;
  will-change: transform;
}

.micro-demo figcaption {
  display: none;
}

.demo-cursor {
  position: absolute;
  left: var(--cursor-start-x);
  top: var(--cursor-start-y);
  z-index: 3;
  width: 34px;
  height: 34px;
  color: hsl(var(--foreground));
  animation: demoCursor 4.6s cubic-bezier(.4, 0, .2, 1) 2 both;
  filter: drop-shadow(0 2px 4px hsl(0 0% 0% / .22));
  will-change: left, top, transform, opacity;
}

.demo-cursor::before {
  content: "";
  display: block;
  width: 34px;
  height: 34px;
  background: hsl(var(--background));
  clip-path: polygon(8% 0, 8% 82%, 30% 62%, 43% 100%, 58% 94%, 45% 57%, 72% 57%);
}

.demo-cursor::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: hsl(var(--foreground));
  clip-path: polygon(8% 0, 8% 82%, 30% 62%, 43% 100%, 58% 94%, 45% 57%, 72% 57%, 68% 51%, 37% 51%, 50% 90%, 45% 92%, 32% 55%, 14% 70%, 14% 14%);
  opacity: .92;
}

.demo-click-ring {
  position: absolute;
  left: var(--target-x);
  top: var(--target-y);
  z-index: 2;
  width: 52px;
  height: 52px;
  border: 3px solid hsl(var(--brand-primary));
  border-radius: 999px;
  transform: translate(-50%, -50%) scale(.6);
  opacity: 0;
  box-shadow: 0 0 0 5px hsl(var(--brand-primary) / .12);
  animation: demoClickRing 4.6s cubic-bezier(.4, 0, .2, 1) 2 both;
  pointer-events: none;
}

.two-step-demo .micro-demo-viewport {
  background: hsl(var(--card));
}

.two-step-demo .micro-demo-image {
  animation: twoStepFirstFrame 6.4s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.two-step-demo .second-frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  animation: twoStepSecondFrame 6.4s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.two-step-demo .demo-cursor {
  width: 36px;
  height: 36px;
  animation: twoStepCursor 6.4s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.two-step-demo .demo-cursor::before,
.two-step-demo .demo-cursor::after {
  width: 36px;
  height: 36px;
}

.two-step-demo .demo-click-ring {
  animation: twoStepClickRing 6.4s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.draft-flow-demo .micro-demo-viewport {
  aspect-ratio: 1124 / 802;
  background: hsl(var(--card));
}

.draft-flow-demo .micro-demo-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  animation: draftFlowFirstFrame 7.2s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.draft-flow-demo .second-frame,
.draft-flow-demo .third-frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
}

.draft-flow-demo .second-frame {
  animation: draftFlowSecondFrame 7.2s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.draft-flow-demo .third-frame {
  animation: draftFlowThirdFrame 7.2s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.draft-flow-demo .demo-cursor {
  width: 36px;
  height: 36px;
  animation: draftFlowCursor 7.2s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.draft-flow-demo .demo-cursor::before,
.draft-flow-demo .demo-cursor::after {
  width: 36px;
  height: 36px;
}

.draft-flow-demo .demo-click-ring {
  animation: draftFlowClickRing 7.2s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.micro-demo.is-animation-resetting *,
.micro-demo.is-animation-resetting *::before,
.micro-demo.is-animation-resetting *::after {
  animation: none !important;
}

.date-correction-demo .date-demo-viewport {
  min-height: clamp(430px, 50vw, 540px);
  background: hsl(var(--card));
}

.date-frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  padding: 12px 10px 0;
  background: hsl(var(--card));
  color: hsl(var(--foreground));
}

.date-frame-1 {
  opacity: 1;
  animation: dateFrame1 14s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.date-frame-2 {
  animation: dateFrame2 14s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.date-frame-3 {
  animation: dateFrame3 14s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.date-frame-4 {
  animation: dateFrame4 14s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.date-frame-5 {
  animation: dateFrame5 14s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.date-demo-header {
  position: relative;
  min-height: 36px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 19px;
  line-height: 26px;
}

.date-demo-header strong {
  font-weight: 700;
}

.date-demo-header .sparkle {
  color: hsl(271 91% 55%);
  font-size: 18px;
}

.date-demo-header .chevron {
  margin-left: auto;
  color: hsl(var(--muted-foreground));
  font-size: 22px;
  transform: translateY(-4px);
}

.date-label {
  min-height: 33px;
  display: flex;
  align-items: center;
  border-radius: 6px 6px 0 0;
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  padding: 0 12px;
  font-size: 17px;
  font-weight: 700;
}

.date-value,
.date-input {
  min-height: 38px;
  display: flex;
  align-items: center;
  color: hsl(var(--foreground));
  font-size: 18px;
  font-weight: 600;
  padding: 0 22px;
}

.date-value.selected {
  border-left: 5px solid hsl(var(--brand-primary));
  border-radius: 8px;
  background: hsl(var(--brand-primary-light));
  padding-left: 16px;
}

.date-actions {
  position: absolute;
  top: 64px;
  right: 16px;
  z-index: 2;
  display: flex;
  gap: 10px;
  color: hsl(218 11% 62%);
}

.date-actions .thumbs-down-icon {
  color: hsl(var(--destructive));
}

.mini-icon {
  width: 17px;
  height: 17px;
  display: inline-block;
  background: currentColor;
  mask: var(--icon) center / contain no-repeat;
  -webkit-mask: var(--icon) center / contain no-repeat;
}

.thumbs-up-icon {
  --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M2 21h4V9H2v12zm20-10c0-1.1-.9-2-2-2h-6.3l1-4.6.03-.32c0-.41-.17-.79-.44-1.06L13.2 2 6.6 8.6c-.37.36-.6.86-.6 1.4v8c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73z'/%3E%3C/svg%3E");
}

.thumbs-down-icon {
  --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M22 3h-4v12h4V3zM2 13c0 1.1.9 2 2 2h6.3l-1 4.6-.03.32c0 .41.17.79.44 1.06L10.8 22l6.6-6.6c.37-.36.6-.86.6-1.4V6c0-1.1-.9-2-2-2H7c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73z'/%3E%3C/svg%3E");
}

.edit-icon {
  --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M3 17.25V21h3.75L17.8 9.95l-3.75-3.75L3 17.25zM20.7 7.05a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E");
}

.citation-card {
  position: relative;
  margin-top: 12px;
  min-height: 235px;
  border-left: 5px solid hsl(var(--brand-primary));
  border-radius: 10px;
  background: hsl(210 40% 98%);
  padding: 22px 24px;
  color: hsl(216 18% 34%);
}

.citation-card strong {
  display: block;
  margin-bottom: 12px;
  color: hsl(215 26% 17%);
  font-size: 18px;
}

.citation-card p {
  max-width: 860px;
  color: hsl(216 18% 34%);
  font-size: 18px;
  line-height: 1.5;
}

.citation-card small {
  display: block;
  margin-top: 12px;
  color: hsl(var(--muted-foreground));
  font-size: 14px;
  font-weight: 700;
}

.citation-close {
  position: absolute;
  top: 16px;
  right: 18px;
  border: 0;
  background: transparent;
  color: hsl(var(--muted-foreground));
  font-size: 28px;
  line-height: 1;
}

.citation-line {
  height: 1px;
  margin-top: 14px;
  background: hsl(var(--border));
}

.citation-buttons {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}

.citation-buttons span {
  min-height: 37px;
  display: inline-flex;
  align-items: center;
  border: 1px solid hsl(var(--border));
  border-radius: 8px;
  background: hsl(var(--card));
  color: hsl(var(--brand-primary));
  padding: 0 16px;
  font-weight: 700;
}

.citation-buttons .disabled {
  color: hsl(var(--muted-foreground));
  opacity: .35;
}

.citation-buttons .restore {
  border-color: hsl(25 95% 75%);
  color: hsl(20 95% 45%);
}

.wrong-day {
  position: relative;
  display: inline-block;
  color: hsl(216 18% 34%);
  font-weight: 800;
  animation: wrongDayPulse 14s ease-in-out 2 both;
}

.wrong-day::after {
  content: "";
  position: absolute;
  inset: -8px -11px;
  border: 4px solid hsl(var(--destructive));
  border-radius: 999px;
  opacity: 0;
  animation: wrongDayHalo 14s ease-in-out 2 both;
}

.wrong-day::before {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: -5px;
  height: 4px;
  border-radius: 999px;
  background: hsl(var(--destructive));
  opacity: 0;
  animation: wrongDayUnderline 14s ease-in-out 2 both;
}

.extracted-wrong-date {
  position: relative;
  display: inline-block;
  color: hsl(var(--destructive));
  font-weight: 800;
  animation: extractedWrongDate 14s ease-in-out 2 both;
}

.extracted-wrong-date::after {
  content: "";
  position: absolute;
  inset: -7px -9px;
  border: 3px solid hsl(var(--destructive));
  border-radius: 999px;
  opacity: 0;
  animation: extractedWrongDateHalo 14s ease-in-out 2 both;
}

.extracted-wrong-date::before {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: -5px;
  height: 4px;
  border-radius: 999px;
  background: hsl(var(--destructive));
  opacity: 0;
  animation: extractedWrongDateUnderline 14s ease-in-out 2 both;
}

.date-input {
  min-height: 58px;
  border: 2px solid hsl(var(--brand-primary));
  border-radius: 8px;
  background: hsl(var(--card));
  padding-left: 14px;
  font-weight: 500;
}

.date-input.corrected {
  animation: correctedDateGlow 14s ease-in-out 2 both;
}

.date-day-swap {
  display: inline-grid;
  width: 24px;
  vertical-align: baseline;
}

.typing-date {
  grid-area: 1 / 1;
  display: inline-block;
}

.initial-date {
  color: hsl(var(--foreground));
  animation: deleteInitialDate 14s steps(2, end) 2 both;
}

.corrected-date {
  color: hsl(var(--brand-primary));
  font-weight: 700;
  animation: typeCorrectedDate 14s steps(2, end) 2 both;
}

.input-caret {
  width: 2px;
  height: 24px;
  display: inline-block;
  margin-left: 2px;
  background: hsl(var(--foreground));
  animation: caretBlink 1s steps(1) infinite;
}

.edit-buttons {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.edit-buttons span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  border-radius: 7px;
  padding: 0 16px;
  font-size: 17px;
}

.save-button {
  background: hsl(var(--brand-primary));
  color: hsl(var(--primary-foreground));
}

.cancel-button {
  background: hsl(215 12% 82%);
  color: hsl(215 16% 25%);
}

.date-demo-cursor {
  position: absolute;
  z-index: 10;
  left: 64%;
  top: 58%;
  width: 38px;
  height: 38px;
  color: hsl(var(--foreground));
  animation: dateCorrectionCursor 14s cubic-bezier(.4, 0, .2, 1) 2 both;
  filter: drop-shadow(0 2px 5px hsl(0 0% 0% / .25));
}

.date-demo-cursor::before {
  content: "";
  display: block;
  width: 38px;
  height: 38px;
  background: hsl(var(--background));
  clip-path: polygon(8% 0, 8% 82%, 30% 62%, 43% 100%, 58% 94%, 45% 57%, 72% 57%);
}

.date-demo-cursor::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: hsl(var(--foreground));
  clip-path: polygon(8% 0, 8% 82%, 30% 62%, 43% 100%, 58% 94%, 45% 57%, 72% 57%, 68% 51%, 37% 51%, 50% 90%, 45% 92%, 32% 55%, 14% 70%, 14% 14%);
}

.date-demo-ring {
  position: absolute;
  z-index: 9;
  width: 48px;
  height: 48px;
  border: 3px solid hsl(var(--brand-primary));
  border-radius: 999px;
  opacity: 0;
  box-shadow: 0 0 0 5px hsl(var(--brand-primary) / .12);
  transform: translate(-50%, -50%) scale(.65);
}

.date-ring-1 {
  left: 82px;
  top: 101px;
  animation: dateRing1 14s ease-in-out 2 both;
}

.date-ring-2 {
  left: calc(100% - 52px);
  top: 73px;
  border-color: hsl(var(--destructive));
  box-shadow: 0 0 0 5px hsl(var(--destructive) / .12);
  animation: dateRing2 14s ease-in-out 2 both;
}

.date-ring-3 {
  left: calc(100% - 25px);
  top: 73px;
  animation: dateRing3 14s ease-in-out 2 both;
}

.date-ring-4 {
  left: 60px;
  top: 165px;
  animation: dateRing4 14s ease-in-out 2 both;
}

.citation-jump-demo .citation-jump-viewport {
  min-height: clamp(420px, 46vw, 520px);
  background: hsl(var(--card));
}

.citation-jump-frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  overflow: hidden;
}

.citation-jump-frame-1 {
  opacity: 1;
  animation: citationJumpFrame1 7.2s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.citation-jump-frame-2 {
  animation: citationJumpFrame2 7.2s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.citation-topbar {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid hsl(var(--border));
  box-shadow: var(--shadow-sm);
  padding: 0 10px;
  white-space: nowrap;
  font-size: 12px;
}

.citation-topbar strong {
  min-width: 230px;
  font-size: 13px;
}

.back-chevron {
  color: hsl(var(--muted-foreground));
  font-size: 22px;
  line-height: 1;
}

.participate-pill {
  border: 1px solid hsl(var(--status-participate-border));
  border-radius: 999px;
  background: hsl(var(--status-participate-bg));
  color: hsl(var(--status-participate));
  padding: 4px 12px;
  font-weight: 700;
}

.active-tab {
  border-radius: 6px;
  background: hsl(var(--brand-primary));
  color: hsl(var(--primary-foreground));
  padding: 8px 12px;
  font-weight: 700;
}

.view-docs {
  margin-left: auto;
  font-weight: 700;
}

.citation-app-layout {
  display: grid;
  grid-template-columns: 45% 55%;
  height: calc(100% - 40px);
  min-height: 0;
}

.citation-table-panel,
.summary-panel,
.pdf-panel {
  min-width: 0;
  border-right: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  overflow: hidden;
}

.monico-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 24px 16px 16px;
  font-size: 12px;
}

.monico-row strong {
  font-size: 22px;
}

.monico-row small {
  color: hsl(var(--muted-foreground));
}

.mini-table {
  display: grid;
  grid-template-columns: 18% 48% 34%;
  gap: 0;
  margin: 0 18px;
  border-top: 1px solid hsl(var(--border));
  font-size: 12px;
  line-height: 1.45;
}

.mini-table > div {
  border-bottom: 1px solid hsl(var(--border));
  padding: 12px 10px;
}

.mini-table-head {
  background: hsl(var(--muted));
  font-weight: 700;
}

.summary-panel {
  border-right: 0;
  padding: 18px 16px;
  overflow: hidden;
}

.citation-jump-demo .summary-panel {
  position: relative;
}

.summary-panel h5 {
  margin: 0 0 16px;
  font-size: 16px;
}

.summary-card {
  position: relative;
  height: calc(100% - 34px);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 14px;
  background: hsl(var(--card));
  overflow: hidden;
}

.summary-card h6 {
  margin: 0 0 12px;
  font-size: 14px;
}

.summary-card h6 span {
  color: hsl(271 91% 55%);
}

.summary-question {
  border-radius: 6px;
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
}

.summary-card p {
  margin: 8px 10px 12px;
  color: hsl(var(--foreground));
  font-size: 12px;
  line-height: 1.45;
}

.selected-question {
  background: hsl(var(--brand-primary-light));
}

.source-card {
  position: relative;
  border-left: 4px solid hsl(var(--brand-primary));
  border-radius: 8px;
  background: hsl(210 40% 98%);
  padding: 18px;
  font-size: 12px;
}

.source-card strong {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
}

.source-card p {
  margin: 0;
  color: hsl(216 18% 34%);
}

.source-card small {
  display: block;
  margin-top: 10px;
  color: hsl(var(--muted-foreground));
  font-weight: 700;
}

.source-close {
  position: absolute;
  top: 12px;
  right: 12px;
  border: 0;
  background: transparent;
  color: hsl(var(--muted-foreground));
  font-size: 22px;
}

.source-card .citation-buttons {
  margin-top: 14px;
}

.citation-jump-frame-1 .source-card {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
}

.citation-jump-frame-1 .summary-card > p {
  margin-bottom: 8px;
}

.source-card .citation-buttons span {
  min-height: 30px;
  padding: 0 12px;
  font-size: 12px;
}

.viewer-open {
  grid-template-columns: 50% 50%;
}

.pdf-panel {
  background: hsl(var(--card));
}

.pdf-toolbar {
  min-height: 42px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid hsl(var(--border));
  padding: 0 10px;
  color: hsl(var(--brand-primary));
  font-size: 12px;
  font-weight: 700;
}

.pdf-toolbar span:nth-child(2) {
  border: 1px solid hsl(var(--border));
  border-radius: 6px;
  color: hsl(var(--foreground));
  padding: 8px 10px;
}

.pdf-controls {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid hsl(var(--border));
  padding: 0 12px;
  font-size: 12px;
}

.pdf-controls span:nth-child(2) {
  border: 1px solid hsl(var(--border));
  border-radius: 4px;
  padding: 4px 12px;
}

.pdf-page {
  height: calc(100% - 76px);
  margin: 0 14px;
  padding: 20px 34px;
  border-left: 1px solid hsl(var(--border));
  border-right: 1px solid hsl(var(--border));
  overflow: hidden;
  font-size: 12px;
  line-height: 1.45;
}

.pdf-page p {
  color: hsl(var(--foreground));
  margin: 12px 0;
}

.pdf-page ul {
  margin: 8px 0 14px 18px;
}

.highlighted-source {
  border: 2px solid hsl(224 65% 55%);
  background: hsl(224 80% 82%);
  padding: 4px;
  animation: sourceHighlightPulse 7.2s ease-in-out 2 both;
}

.after-jump {
  padding-left: 12px;
}

.compact-source-card {
  margin-top: 10px;
}

.citation-jump-cursor {
  position: absolute;
  z-index: 12;
  left: 66%;
  top: 45%;
  width: 38px;
  height: 38px;
  color: hsl(var(--foreground));
  animation: citationJumpCursor 7.2s cubic-bezier(.4, 0, .2, 1) 2 both;
  filter: drop-shadow(0 2px 5px hsl(0 0% 0% / .25));
}

.citation-jump-cursor::before {
  content: "";
  display: block;
  width: 38px;
  height: 38px;
  background: hsl(var(--background));
  clip-path: polygon(8% 0, 8% 82%, 30% 62%, 43% 100%, 58% 94%, 45% 57%, 72% 57%);
}

.citation-jump-cursor::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: hsl(var(--foreground));
  clip-path: polygon(8% 0, 8% 82%, 30% 62%, 43% 100%, 58% 94%, 45% 57%, 72% 57%, 68% 51%, 37% 51%, 50% 90%, 45% 92%, 32% 55%, 14% 70%, 14% 14%);
}

.citation-jump-ring {
  position: absolute;
  z-index: 11;
  left: calc(45% + 86px);
  top: calc(100% - 40px);
  width: 52px;
  height: 52px;
  border: 3px solid hsl(var(--brand-primary));
  border-radius: 999px;
  opacity: 0;
  box-shadow: 0 0 0 5px hsl(var(--brand-primary) / .12);
  transform: translate(-50%, -50%) scale(.65);
  animation: citationJumpRing 7.2s ease-in-out 2 both;
}

.reports-article .article-heading {
  padding-bottom: 6px;
}

.reports-guide-layout {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(320px, 1.05fr);
  gap: 20px;
  align-items: start;
}

.reports-guide-layout .visual-card {
  margin: 0;
}

.reports-bullets,
.reports-decision-panel {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card-hover));
  padding: 16px;
}

.reports-bullets h4,
.reports-decision-panel h4 {
  margin: 0 0 10px;
  font-size: 16px;
}

.reports-bullets ul {
  margin: 0;
  padding-left: 20px;
}

.reports-bullets li {
  color: hsl(var(--foreground));
  font-size: 13px;
  line-height: 1.58;
}

.reports-bullets li + li {
  margin-top: 9px;
}

.reports-decision-panel {
  border-color: hsl(var(--status-review-border));
  background: hsl(var(--status-review-bg));
}

.reports-decision-panel h4 {
  color: hsl(var(--status-review));
}

.reports-decision-panel p {
  color: hsl(var(--foreground));
  font-size: 14px;
  line-height: 1.6;
}

.proposal-article .article-heading {
  padding-bottom: 6px;
}

.proposal-intro-panel {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card-hover));
  padding: 16px 18px;
}

.proposal-intro-panel ul {
  margin: 0;
  padding-left: 20px;
  color: hsl(var(--foreground));
  font-size: 14px;
  line-height: 1.65;
}

.proposal-intro-panel li + li {
  margin-top: 8px;
}

.proposal-feature {
  display: grid;
  gap: 18px;
}

.proposal-feature .clarification-copy {
  background: hsl(var(--card-hover));
}

.proposal-add-card {
  margin: 0;
}

.proposal-add-image-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
}

.proposal-add-highlight {
  position: absolute;
  left: 49.2%;
  top: 93.2%;
  width: 18%;
  height: 5%;
  border: 3px solid hsl(var(--destructive));
  border-radius: 999px;
  box-shadow: 0 0 0 6px hsl(var(--destructive) / .13);
  pointer-events: none;
}

.proposal-export-card {
  margin: 0;
}

.proposal-export-image-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
}

.proposal-export-highlight {
  position: absolute;
  left: 82.2%;
  top: 8.9%;
  width: 12.1%;
  height: 6%;
  border: 3px solid hsl(var(--destructive));
  border-radius: 999px;
  box-shadow: 0 0 0 6px hsl(var(--destructive) / .13);
  pointer-events: none;
}

.proposal-filter-demo {
  margin: 0;
}

.proposal-filter-viewport {
  aspect-ratio: 1885 / 910;
  background: hsl(var(--card));
}

.proposal-filter-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 0;
}

.proposal-filter-frame-1 {
  opacity: 1;
  animation: proposalFilterFrame1 9s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.proposal-filter-frame-2 {
  animation: proposalFilterFrame2 9s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.proposal-filter-frame-3 {
  animation: proposalFilterFrame3 9s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.proposal-filter-cursor {
  position: absolute;
  z-index: 7;
  left: 78%;
  top: 22%;
  width: 36px;
  height: 36px;
  color: hsl(var(--foreground));
  filter: drop-shadow(0 2px 5px hsl(0 0% 0% / .25));
  animation: proposalFilterCursor 9s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.proposal-filter-cursor::before {
  content: "";
  display: block;
  width: 36px;
  height: 36px;
  background: hsl(var(--background));
  clip-path: polygon(8% 0, 8% 82%, 30% 62%, 43% 100%, 58% 94%, 45% 57%, 72% 57%);
}

.proposal-filter-cursor::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: hsl(var(--foreground));
  clip-path: polygon(8% 0, 8% 82%, 30% 62%, 43% 100%, 58% 94%, 45% 57%, 72% 57%, 68% 51%, 37% 51%, 50% 90%, 45% 92%, 32% 55%, 14% 70%, 14% 14%);
}

.proposal-filter-ring {
  position: absolute;
  z-index: 6;
  width: 52px;
  height: 52px;
  border: 3px solid hsl(var(--brand-primary));
  border-radius: 999px;
  opacity: 0;
  box-shadow: 0 0 0 5px hsl(var(--brand-primary) / .12);
  transform: translate(-50%, -50%) scale(.65);
  pointer-events: none;
}

.proposal-filter-ring-1 {
  left: 88.7%;
  top: 17.1%;
  animation: proposalFilterRing1 9s ease-in-out 2 both;
}

.proposal-filter-ring-2 {
  left: 88.7%;
  top: 80.3%;
  animation: proposalFilterRing2 9s ease-in-out 2 both;
}

.proposal-assign-demo {
  margin: 0;
}

.proposal-assign-viewport {
  aspect-ratio: 1885 / 910;
  background: hsl(var(--card));
}

.proposal-assign-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 0;
}

.proposal-assign-frame-1 {
  opacity: 1;
  animation: proposalAssignFrame1 12s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.proposal-assign-frame-2 {
  animation: proposalAssignFrame2 12s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.proposal-assign-frame-3 {
  animation: proposalAssignFrame3 12s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.proposal-assign-frame-4 {
  animation: proposalAssignFrame4 12s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.proposal-assign-cursor {
  position: absolute;
  z-index: 7;
  left: 12%;
  top: 30%;
  width: 36px;
  height: 36px;
  color: hsl(var(--foreground));
  filter: drop-shadow(0 2px 5px hsl(0 0% 0% / .25));
  animation: proposalAssignCursor 12s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.proposal-assign-cursor::before {
  content: "";
  display: block;
  width: 36px;
  height: 36px;
  background: hsl(var(--background));
  clip-path: polygon(8% 0, 8% 82%, 30% 62%, 43% 100%, 58% 94%, 45% 57%, 72% 57%);
}

.proposal-assign-cursor::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: hsl(var(--foreground));
  clip-path: polygon(8% 0, 8% 82%, 30% 62%, 43% 100%, 58% 94%, 45% 57%, 72% 57%, 68% 51%, 37% 51%, 50% 90%, 45% 92%, 32% 55%, 14% 70%, 14% 14%);
}

.proposal-assign-ring {
  position: absolute;
  z-index: 6;
  width: 52px;
  height: 52px;
  border: 3px solid hsl(var(--brand-primary));
  border-radius: 999px;
  opacity: 0;
  box-shadow: 0 0 0 5px hsl(var(--brand-primary) / .12);
  transform: translate(-50%, -50%) scale(.65);
  pointer-events: none;
}

.proposal-assign-ring-1 {
  left: 4%;
  top: 25%;
  animation: proposalAssignRing1 12s ease-in-out 2 both;
}

.proposal-assign-ring-2 {
  left: 61.4%;
  top: 81.7%;
  animation: proposalAssignRing2 12s ease-in-out 2 both;
}

.proposal-assign-ring-3 {
  left: 67.5%;
  top: 93.2%;
  animation: proposalAssignRing3 12s ease-in-out 2 both;
}

.proposal-upload-demo {
  margin: 0;
}

.proposal-upload-viewport {
  aspect-ratio: 1885 / 910;
  background: hsl(var(--card));
}

.proposal-upload-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 0;
}

.proposal-upload-frame-1 {
  opacity: 1;
  animation: proposalUploadFrame1 16s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.proposal-upload-frame-2 {
  animation: proposalUploadFrame2 16s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.proposal-upload-frame-3 {
  animation: proposalUploadFrame3 16s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.proposal-upload-frame-4 {
  animation: proposalUploadFrame4 16s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.proposal-upload-frame-5 {
  animation: proposalUploadFrame5 16s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.proposal-upload-cursor {
  position: absolute;
  z-index: 8;
  left: 14%;
  top: 33%;
  width: 36px;
  height: 36px;
  color: hsl(var(--foreground));
  filter: drop-shadow(0 2px 5px hsl(0 0% 0% / .25));
  animation: proposalUploadCursor 16s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.proposal-upload-cursor::before {
  content: "";
  display: block;
  width: 36px;
  height: 36px;
  background: hsl(var(--background));
  clip-path: polygon(8% 0, 8% 82%, 30% 62%, 43% 100%, 58% 94%, 45% 57%, 72% 57%);
}

.proposal-upload-cursor::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: hsl(var(--foreground));
  clip-path: polygon(8% 0, 8% 82%, 30% 62%, 43% 100%, 58% 94%, 45% 57%, 72% 57%, 68% 51%, 37% 51%, 50% 90%, 45% 92%, 32% 55%, 14% 70%, 14% 14%);
}

.proposal-upload-ring {
  position: absolute;
  z-index: 7;
  width: 52px;
  height: 52px;
  border: 3px solid hsl(var(--brand-primary));
  border-radius: 999px;
  opacity: 0;
  box-shadow: 0 0 0 5px hsl(var(--brand-primary) / .12);
  transform: translate(-50%, -50%) scale(.65);
  pointer-events: none;
}

.proposal-upload-ring-1 {
  left: 7.8%;
  top: 30.3%;
  animation: proposalUploadRing1 16s ease-in-out 2 both;
}

.proposal-upload-ring-2 {
  left: 51.3%;
  top: 77.6%;
  animation: proposalUploadRing2 16s ease-in-out 2 both;
}

.proposal-upload-ring-3 {
  left: 87.1%;
  top: 33.4%;
  animation: proposalUploadRing3 16s ease-in-out 2 both;
}

.proposal-upload-ring-4 {
  left: 86.9%;
  top: 46.7%;
  animation: proposalUploadRing4 16s ease-in-out 2 both;
}

.proposal-upload-attention {
  position: absolute;
  z-index: 6;
  border: 3px solid hsl(var(--destructive));
  border-radius: 18px;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 0 6px hsl(var(--destructive) / .13);
}

.proposal-upload-attention-document {
  left: 8.8%;
  top: 73.6%;
  width: 46%;
  height: 15.8%;
  animation: proposalUploadDocumentAttention 16s ease-in-out 2 both;
}

.proposal-upload-attention-status {
  left: 76.4%;
  top: 30.2%;
  width: 14.2%;
  height: 5.8%;
  animation: proposalUploadStatusAttention 16s ease-in-out 2 both;
}

.workflow-article .article-heading {
  padding-bottom: 6px;
}

.workflow-guide {
  display: grid;
  gap: 36px;
}

.workflow-section {
  display: grid;
  gap: 14px;
}

.workflow-copy {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card-hover));
  padding: 16px 18px;
}

.workflow-copy h4 {
  margin: 0 0 8px;
  font-size: 18px;
}

.workflow-copy p {
  margin: 0;
  color: hsl(var(--muted-foreground));
  line-height: 1.65;
}

.workflow-demo {
  margin: 0;
}

.workflow-viewport {
  aspect-ratio: 1911 / 923;
  background: hsl(var(--card));
}

.workflow-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
}

.workflow-cursor {
  position: absolute;
  z-index: 8;
  opacity: 0;
  pointer-events: none;
}

.workflow-cursor::before {
  content: "";
  display: block;
  width: 36px;
  height: 36px;
  background: hsl(var(--foreground));
  clip-path: polygon(12% 4%, 12% 86%, 34% 66%, 49% 96%, 62% 89%, 47% 60%, 76% 60%);
  filter: drop-shadow(0 7px 12px hsl(222 47% 11% / .28));
}

.workflow-cursor::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: hsl(var(--card));
  clip-path: polygon(12% 4%, 12% 86%, 34% 66%, 49% 96%, 62% 89%, 47% 60%, 76% 60%);
}

.workflow-ring {
  position: absolute;
  z-index: 7;
  width: 54px;
  height: 54px;
  border: 3px solid hsl(var(--brand-primary));
  border-radius: 999px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.75);
  pointer-events: none;
}

.workflow-attention {
  position: absolute;
  z-index: 6;
  border: 3px solid hsl(var(--destructive));
  border-radius: 18px;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 0 3px hsl(var(--destructive) / .09);
}

.workflow-arrow {
  position: absolute;
  z-index: 7;
  width: 170px;
  height: 3px;
  background: hsl(var(--destructive));
  opacity: 0;
  transform-origin: right center;
  pointer-events: none;
}

.workflow-arrow::before,
.workflow-arrow::after {
  content: "";
  position: absolute;
  right: -2px;
  width: 18px;
  height: 3px;
  background: hsl(var(--destructive));
  transform-origin: right center;
}

.workflow-arrow::before {
  transform: rotate(34deg);
}

.workflow-arrow::after {
  transform: rotate(-34deg);
}

.workflow-underline {
  position: absolute;
  z-index: 7;
  height: 4px;
  border-radius: 999px;
  background: hsl(var(--destructive));
  opacity: 0;
  pointer-events: none;
}

.workflow-status-frame-1 {
  opacity: 1;
  animation: workflowStatusFrame1 8s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.workflow-status-frame-2 {
  animation: workflowStatusFrame2 8s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.workflow-status-attention-1 {
  left: 8.8%;
  top: 12.4%;
  width: 6.6%;
  height: 4.7%;
  animation: workflowStatusAttention1 8s ease-in-out 2 both;
}

.workflow-status-attention-2 {
  left: 8.9%;
  top: 17.1%;
  width: 14.8%;
  height: 40.5%;
  animation: workflowStatusAttention2 8s ease-in-out 2 both;
}

.workflow-status-cursor {
  animation: workflowStatusCursor 8s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.workflow-status-ring {
  left: 14.2%;
  top: 14.8%;
  animation: workflowStatusRing 8s ease-in-out 2 both;
}

.workflow-notes-frame-1 {
  opacity: 1;
  animation: workflowNotesFrame1 10s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.workflow-notes-frame-2 {
  animation: workflowNotesFrame2 10s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.workflow-notes-frame-3 {
  animation: workflowNotesFrame3 10s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.workflow-notes-attention {
  left: 3.5%;
  top: 57.2%;
  width: 47.2%;
  height: 40.8%;
  animation: workflowNotesAttention 10s ease-in-out 2 both;
}

.workflow-notes-cursor {
  animation: workflowNotesCursor 10s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.workflow-notes-ring {
  left: 48.5%;
  top: 90.6%;
  animation: workflowNotesRing 10s ease-in-out 2 both;
}

.workflow-tasks-frame-1 {
  opacity: 1;
  animation: workflowTasksFrame1 13s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.workflow-tasks-frame-2 {
  animation: workflowTasksFrame2 13s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.workflow-tasks-frame-3 {
  animation: workflowTasksFrame3 13s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.workflow-tasks-frame-4 {
  animation: workflowTasksFrame4 13s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.workflow-tasks-attention-1 {
  left: 51.3%;
  top: 57.4%;
  width: 47.3%;
  height: 37.2%;
  animation: workflowTasksAttention1 13s ease-in-out 2 both;
}

.workflow-tasks-attention-2 {
  left: 52.6%;
  top: 88.4%;
  width: 42.2%;
  height: 5.3%;
  animation: workflowTasksAttention2 13s ease-in-out 2 both;
}

.workflow-tasks-cursor {
  animation: workflowTasksCursor 13s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.workflow-tasks-ring-1 {
  left: 64.3%;
  top: 96.2%;
  animation: workflowTasksRing1 13s ease-in-out 2 both;
}

.workflow-tasks-ring-2 {
  left: 95.7%;
  top: 90.7%;
  animation: workflowTasksRing2 13s ease-in-out 2 both;
}

.workflow-notifications-frame-1 {
  opacity: 1;
  animation: workflowNotificationsFrame1 20s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.workflow-notifications-frame-2 {
  animation: workflowNotificationsFrame2 20s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.workflow-notifications-frame-3 {
  animation: workflowNotificationsFrame3 20s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.workflow-notifications-frame-4 {
  animation: workflowNotificationsFrame4 20s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.workflow-notifications-attention-bell {
  left: .25%;
  top: 89.7%;
  width: 3.1%;
  height: 6.1%;
  border-radius: 999px;
  animation: workflowNotificationsBellAttention 20s ease-in-out 2 both;
}

.workflow-notifications-attention-list {
  left: 4.1%;
  top: 24.4%;
  width: 56.6%;
  height: 26.8%;
  animation: workflowNotificationsListAttention 20s ease-in-out 2 both;
}

.workflow-notifications-arrow {
  left: 51.8%;
  top: 34.4%;
  width: 92px;
  animation: workflowNotificationsArrow 20s ease-in-out 2 both;
}

.workflow-notifications-underline-person {
  left: 68.5%;
  top: 46.8%;
  width: 5.25%;
  animation: workflowNotificationsUnderline 20s ease-in-out 2 both;
}

.workflow-notifications-underline-priority {
  left: 75.1%;
  top: 46.8%;
  width: 5.15%;
  animation: workflowNotificationsUnderline 20s ease-in-out 2 both;
}

.workflow-notifications-attention-task {
  left: 62.4%;
  top: 48.8%;
  width: 35.9%;
  height: 9.5%;
  animation: workflowNotificationsTaskAttention 20s ease-in-out 2 both;
}

.workflow-notifications-cursor {
  animation: workflowNotificationsCursor 20s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.workflow-notifications-ring-bell {
  left: 1.45%;
  top: 92.5%;
  animation: workflowNotificationsRingBell 20s ease-in-out 2 both;
}

.workflow-notifications-ring-filter-1 {
  left: 65.2%;
  top: 45.3%;
  display: none;
}

.workflow-notifications-ring-filter-2 {
  left: 71.3%;
  top: 45.3%;
  animation: workflowNotificationsRingFilter2 20s ease-in-out 2 both;
}

.workflow-notifications-ring-filter-3 {
  left: 78%;
  top: 45.3%;
  animation: workflowNotificationsRingFilter3 20s ease-in-out 2 both;
}

.workflow-notifications-ring-complete {
  left: 63.5%;
  top: 51.1%;
  animation: workflowNotificationsRingComplete 20s ease-in-out 2 both;
}

.technical-demo {
  width: min(100%, 1180px);
}

.technical-viewport {
  aspect-ratio: 1908 / 925;
}

.technical-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
}

.technical-frame-1 {
  opacity: 1;
  animation: technicalFrame1 18s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.technical-frame-2 {
  animation: technicalFrame2 18s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.technical-frame-3 {
  animation: technicalFrame3 18s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.technical-frame-4 {
  animation: technicalFrame4 18s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.technical-attention {
  position: absolute;
  z-index: 6;
  border: 3px solid hsl(var(--destructive));
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 0 3px hsl(var(--destructive) / .09);
}

.technical-attention-add {
  left: 19.6%;
  top: 84.8%;
  width: 62.8%;
  height: 9.7%;
  border-radius: 18px;
  animation: technicalAttentionAdd 18s ease-in-out 2 both;
}

.technical-attention-requirements,
.technical-attention-catalogs {
  width: 3.2%;
  height: 6%;
  border-radius: 999px;
  animation: technicalAttentionPaperclips 18s ease-in-out 2 both;
}

.technical-attention-requirements {
  left: 31%;
  top: 67.3%;
}

.technical-attention-catalogs {
  left: 62.4%;
  top: 67.3%;
}

.technical-cursor {
  position: absolute;
  z-index: 8;
  width: 34px;
  height: 34px;
  opacity: 0;
  pointer-events: none;
  background: hsl(var(--foreground));
  clip-path: polygon(0 0, 0 100%, 28% 78%, 44% 100%, 61% 91%, 46% 70%, 78% 70%);
  filter: drop-shadow(0 7px 12px hsl(222 47% 11% / .24));
  transform-origin: 8px 8px;
  animation: technicalCursor 18s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.technical-ring {
  position: absolute;
  z-index: 7;
  width: 30px;
  height: 30px;
  border: 3px solid hsl(var(--destructive));
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
}

.technical-ring-add {
  left: 51.2%;
  top: 89.6%;
  animation: technicalRingAdd 18s ease-in-out 2 both;
}

.technical-ring-save {
  left: 75.8%;
  top: 87.8%;
  animation: technicalRingSave 18s ease-in-out 2 both;
}

.technical-ring-requirements {
  left: 32.6%;
  top: 70.2%;
  animation: technicalRingRequirements 18s ease-in-out 2 both;
}

.technical-ring-catalogs {
  left: 64.2%;
  top: 70.2%;
  animation: technicalRingCatalogs 18s ease-in-out 2 both;
}

.technical-ring-analyze {
  left: 51.5%;
  top: 77.8%;
  animation: technicalRingAnalyze 18s ease-in-out 2 both;
}

.technical-extraction-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
}

.technical-extraction-frame-1 {
  opacity: 1;
  animation: technicalExtractionFrame1 12s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.technical-extraction-frame-2 {
  animation: technicalExtractionFrame2 12s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.technical-extraction-attention {
  position: absolute;
  z-index: 6;
  border: 3px solid hsl(var(--destructive));
  border-radius: 18px;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 0 3px hsl(var(--destructive) / .09);
}

.technical-extraction-attention-requirements {
  left: 19.1%;
  top: 31%;
  width: 63.7%;
  height: 30.5%;
  animation: technicalExtractionAttentionRequirements 12s ease-in-out 2 both;
}

.technical-extraction-attention-feedback {
  left: 21.4%;
  top: 61.7%;
  width: 59.5%;
  height: 15.4%;
  animation: technicalExtractionAttentionFeedback 12s ease-in-out 2 both;
}

.technical-extraction-cursor {
  position: absolute;
  z-index: 8;
  width: 34px;
  height: 34px;
  opacity: 0;
  pointer-events: none;
  background: hsl(var(--foreground));
  clip-path: polygon(0 0, 0 100%, 28% 78%, 44% 100%, 61% 91%, 46% 70%, 78% 70%);
  filter: drop-shadow(0 7px 12px hsl(222 47% 11% / .24));
  transform-origin: 8px 8px;
  animation: technicalExtractionCursor 12s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.technical-extraction-ring {
  position: absolute;
  z-index: 7;
  width: 30px;
  height: 30px;
  border: 3px solid hsl(var(--destructive));
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
}

.technical-extraction-ring-confirm {
  left: 75.2%;
  top: 83.1%;
  animation: technicalExtractionRingConfirm 12s ease-in-out 2 both;
}

.technical-review-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
}

.technical-review-frame-1 {
  opacity: 1;
  animation: technicalReviewFrame1 17s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.technical-review-frame-2 {
  animation: technicalReviewFrame2 17s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.technical-review-frame-3 {
  animation: technicalReviewFrame3 17s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.technical-review-frame-4 {
  animation: technicalReviewFrame4 17s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.technical-review-attention {
  position: absolute;
  z-index: 6;
  border: 3px solid hsl(var(--destructive));
  border-radius: 18px;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 0 3px hsl(var(--destructive) / .09);
}

.technical-review-attention-observations {
  left: 19.7%;
  top: 53.7%;
  width: 62.7%;
  height: 8.8%;
  animation: technicalReviewAttentionObservations 17s ease-in-out 2 both;
}

.technical-review-attention-reference {
  left: 20.3%;
  top: 61.3%;
  width: 64%;
  height: 17.8%;
  animation: technicalReviewAttentionReference 17s ease-in-out 2 both;
}

.technical-review-cursor {
  position: absolute;
  z-index: 8;
  width: 26px;
  height: 26px;
  opacity: 0;
  pointer-events: none;
  background: hsl(var(--foreground));
  clip-path: polygon(0 0, 0 100%, 28% 78%, 44% 100%, 61% 91%, 46% 70%, 78% 70%);
  filter: drop-shadow(0 7px 12px hsl(222 47% 11% / .24));
  transform-origin: 8px 8px;
  animation: technicalReviewCursor 17s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.technical-review-ring {
  position: absolute;
  z-index: 7;
  width: 30px;
  height: 30px;
  border: 3px solid hsl(var(--destructive));
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
}

.technical-review-ring-expand {
  left: 22%;
  top: 54.8%;
  animation: technicalReviewRingExpand 17s ease-in-out 2 both;
}

.technical-review-ring-review {
  left: 56.1%;
  top: 41.5%;
  animation: technicalReviewRingReview 17s ease-in-out 2 both;
}

.clarifications-article .article-heading {
  padding-bottom: 6px;
}

.clarifications-flow {
  display: grid;
  gap: 44px;
}

.clarification-feature {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(280px, 1.05fr);
  gap: 20px;
  align-items: start;
}

.clarification-feature.has-demo {
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .95fr);
}

.clarification-feature.is-wide-demo {
  grid-template-columns: 1fr;
}

.clarification-feature.is-wide-demo .clarification-copy {
  order: -1;
}

.clarification-feature .visual-card {
  margin: 0;
}

.clarification-feature .visual-card.compact .module-screenshot {
  max-height: 320px;
}

.clarification-feature .qna-detail-demo {
  margin: 0;
}

.clarifications-article figcaption {
  display: none;
}

.qna-detail-viewport {
  aspect-ratio: 1884 / 804;
  background: hsl(var(--card));
}

.qna-detail-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 0;
}

.qna-detail-frame-1 {
  opacity: 1;
  transform-origin: 47.3% 72%;
  animation: qnaDetailFrame1 9s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.qna-detail-frame-2 {
  transform-origin: 22% 31.5%;
  animation: qnaDetailFrame2 9s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.qna-detail-frame-3 {
  animation: qnaDetailFrame3 9s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.qna-detail-cursor {
  position: absolute;
  z-index: 5;
  left: 58%;
  top: 46%;
  width: 36px;
  height: 36px;
  color: hsl(var(--foreground));
  filter: drop-shadow(0 2px 5px hsl(0 0% 0% / .25));
  animation: qnaDetailCursor 9s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.qna-detail-cursor::before {
  content: "";
  display: block;
  width: 36px;
  height: 36px;
  background: hsl(var(--background));
  clip-path: polygon(8% 0, 8% 82%, 30% 62%, 43% 100%, 58% 94%, 45% 57%, 72% 57%);
}

.qna-detail-cursor::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: hsl(var(--foreground));
  clip-path: polygon(8% 0, 8% 82%, 30% 62%, 43% 100%, 58% 94%, 45% 57%, 72% 57%, 68% 51%, 37% 51%, 50% 90%, 45% 92%, 32% 55%, 14% 70%, 14% 14%);
}

.qna-detail-ring {
  position: absolute;
  z-index: 4;
  width: 52px;
  height: 52px;
  border: 3px solid hsl(var(--brand-primary));
  border-radius: 999px;
  opacity: 0;
  box-shadow: 0 0 0 5px hsl(var(--brand-primary) / .12);
  transform: translate(-50%, -50%) scale(.65);
  pointer-events: none;
}

.qna-detail-ring-1 {
  left: 47.3%;
  top: 72%;
  animation: qnaDetailRing1 9s ease-in-out 2 both;
}

.qna-detail-ring-2 {
  left: 22%;
  top: 31.5%;
  animation: qnaDetailRing2 9s ease-in-out 2 both;
}

.qna-reference-demo {
  margin: 0;
}

.qna-reference-viewport {
  aspect-ratio: 1263 / 510;
  background: hsl(var(--card));
}

.qna-reference-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 0;
}

.qna-reference-frame-1 {
  opacity: 1;
  transform-origin: 5.8% 10.5%;
  animation: qnaReferenceFrame1 9s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.qna-reference-frame-2 {
  transform-origin: 18% 84%;
  animation: qnaReferenceFrame2 9s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.qna-reference-frame-3 {
  animation: qnaReferenceFrame3 9s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.qna-reference-cursor {
  position: absolute;
  z-index: 5;
  left: 28%;
  top: 45%;
  width: 36px;
  height: 36px;
  color: hsl(var(--foreground));
  filter: drop-shadow(0 2px 5px hsl(0 0% 0% / .25));
  animation: qnaReferenceCursor 9s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.qna-reference-cursor::before {
  content: "";
  display: block;
  width: 36px;
  height: 36px;
  background: hsl(var(--background));
  clip-path: polygon(8% 0, 8% 82%, 30% 62%, 43% 100%, 58% 94%, 45% 57%, 72% 57%);
}

.qna-reference-cursor::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: hsl(var(--foreground));
  clip-path: polygon(8% 0, 8% 82%, 30% 62%, 43% 100%, 58% 94%, 45% 57%, 72% 57%, 68% 51%, 37% 51%, 50% 90%, 45% 92%, 32% 55%, 14% 70%, 14% 14%);
}

.qna-reference-ring {
  position: absolute;
  z-index: 4;
  width: 52px;
  height: 52px;
  border: 3px solid hsl(var(--brand-primary));
  border-radius: 999px;
  opacity: 0;
  box-shadow: 0 0 0 5px hsl(var(--brand-primary) / .12);
  transform: translate(-50%, -50%) scale(.65);
  pointer-events: none;
}

.qna-reference-ring-1 {
  left: 5.8%;
  top: 10.5%;
  animation: qnaReferenceRing1 9s ease-in-out 2 both;
}

.qna-reference-ring-2 {
  left: 18%;
  top: 84%;
  animation: qnaReferenceRing2 9s ease-in-out 2 both;
}

.qna-draft-demo {
  margin: 0;
}

.qna-draft-viewport {
  aspect-ratio: 1893 / 853;
  background: hsl(var(--card));
}

.qna-draft-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 0;
}

.qna-draft-frame-1 {
  opacity: 1;
  transform-origin: 80.5% 68.2%;
  animation: qnaDraftFrame1 12s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.qna-draft-frame-2 {
  transform-origin: 76.6% 73.4%;
  animation: qnaDraftFrame2 12s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.qna-draft-frame-3 {
  animation: qnaDraftFrame3 12s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.qna-draft-cursor {
  position: absolute;
  z-index: 7;
  left: 70%;
  top: 50%;
  width: 36px;
  height: 36px;
  color: hsl(var(--foreground));
  filter: drop-shadow(0 2px 5px hsl(0 0% 0% / .25));
  animation: qnaDraftCursor 12s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.qna-draft-cursor::before {
  content: "";
  display: block;
  width: 36px;
  height: 36px;
  background: hsl(var(--background));
  clip-path: polygon(8% 0, 8% 82%, 30% 62%, 43% 100%, 58% 94%, 45% 57%, 72% 57%);
}

.qna-draft-cursor::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: hsl(var(--foreground));
  clip-path: polygon(8% 0, 8% 82%, 30% 62%, 43% 100%, 58% 94%, 45% 57%, 72% 57%, 68% 51%, 37% 51%, 50% 90%, 45% 92%, 32% 55%, 14% 70%, 14% 14%);
}

.qna-draft-ring {
  position: absolute;
  z-index: 6;
  width: 52px;
  height: 52px;
  border: 3px solid hsl(var(--brand-primary));
  border-radius: 999px;
  opacity: 0;
  box-shadow: 0 0 0 5px hsl(var(--brand-primary) / .12);
  transform: translate(-50%, -50%) scale(.65);
  pointer-events: none;
}

.qna-draft-ring-1 {
  left: 80.5%;
  top: 68.2%;
  animation: qnaDraftRing1 12s ease-in-out 2 both;
}

.qna-draft-ring-2 {
  left: 76.6%;
  top: 70.2%;
  animation: qnaDraftRing2 12s ease-in-out 2 both;
}

.qna-draft-ring-3 {
  left: 67.3%;
  top: 3.5%;
  animation: qnaDraftRing3 12s ease-in-out 2 both;
}

.qna-draft-attention {
  position: absolute;
  z-index: 5;
  border: 3px solid hsl(var(--destructive));
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 0 6px hsl(var(--destructive) / .13);
}

.qna-draft-attention-nav {
  left: 62%;
  top: .2%;
  width: 13.2%;
  height: 5.4%;
  animation: qnaDraftNavAttention 12s ease-in-out 2 both;
}

.qna-draft-attention-final {
  left: 48.2%;
  top: 13.8%;
  width: 10.8%;
  height: 6%;
  animation: qnaDraftFinalAttention 12s ease-in-out 2 both;
}

.qna-competitive-demo {
  margin: 0;
}

.qna-competitive-viewport {
  aspect-ratio: 1902 / 718;
  background: hsl(var(--card));
}

.qna-competitive-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 0;
}

.qna-competitive-frame-1 {
  opacity: 1;
  transform-origin: 79.9% 73.3%;
  animation: qnaCompetitiveFrame1 12s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.qna-competitive-frame-2 {
  animation: qnaCompetitiveFrame2 12s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.qna-competitive-frame-3 {
  animation: qnaCompetitiveFrame3 12s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.qna-competitive-cursor {
  position: absolute;
  z-index: 7;
  left: 70%;
  top: 60%;
  width: 36px;
  height: 36px;
  color: hsl(var(--foreground));
  filter: drop-shadow(0 2px 5px hsl(0 0% 0% / .25));
  animation: qnaCompetitiveCursor 12s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.qna-competitive-cursor::before {
  content: "";
  display: block;
  width: 36px;
  height: 36px;
  background: hsl(var(--background));
  clip-path: polygon(8% 0, 8% 82%, 30% 62%, 43% 100%, 58% 94%, 45% 57%, 72% 57%);
}

.qna-competitive-cursor::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: hsl(var(--foreground));
  clip-path: polygon(8% 0, 8% 82%, 30% 62%, 43% 100%, 58% 94%, 45% 57%, 72% 57%, 68% 51%, 37% 51%, 50% 90%, 45% 92%, 32% 55%, 14% 70%, 14% 14%);
}

.qna-competitive-ring {
  position: absolute;
  z-index: 6;
  width: 52px;
  height: 52px;
  border: 3px solid hsl(var(--brand-primary));
  border-radius: 999px;
  opacity: 0;
  box-shadow: 0 0 0 5px hsl(var(--brand-primary) / .12);
  transform: translate(-50%, -50%) scale(.65);
  pointer-events: none;
}

.qna-competitive-ring-1 {
  left: 79.9%;
  top: 73.3%;
  animation: qnaCompetitiveRing1 12s ease-in-out 2 both;
}

.qna-competitive-ring-2 {
  left: 90.8%;
  top: 69%;
  animation: qnaCompetitiveRing2 12s ease-in-out 2 both;
}

.qna-competitive-attention {
  position: absolute;
  z-index: 5;
  border: 3px solid hsl(var(--destructive));
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 0 6px hsl(var(--destructive) / .13);
}

.qna-competitive-attention-action {
  left: 78.8%;
  top: 70.2%;
  width: 2.4%;
  height: 6.4%;
  animation: qnaCompetitiveActionAttention 12s ease-in-out 2 both;
}

.clarification-copy,
.clarification-note-visual {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card-hover));
}

.clarification-copy {
  padding: 16px;
}

.clarification-copy h4 {
  margin: 0 0 10px;
  font-size: 16px;
}

.clarification-copy p {
  color: hsl(var(--foreground));
  font-size: 13px;
  line-height: 1.62;
}

.clarification-copy strong {
  font-weight: 700;
}

.clarification-note-visual {
  min-height: 150px;
  display: grid;
  place-items: center;
  color: hsl(var(--brand-primary));
  background: hsl(var(--brand-primary-light));
}

.clarification-note-visual::before {
  width: 34px;
  height: 34px;
}

.reports-status-demo .reports-status-viewport {
  --reports-inicio-x: 50%;
  --reports-inicio-y: 24px;
  --reports-status-x: 286px;
  --reports-status-y: 152px;
  --reports-revision-x: 297px;
  --reports-revision-y: 172px;
  min-height: clamp(430px, 48vw, 540px);
  background: hsl(var(--card));
}

.reports-status-frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  overflow: hidden;
  background: hsl(var(--card));
}

.reports-status-frame-1 {
  opacity: 1;
  animation: reportsFrame1 12s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.reports-status-frame-2 {
  animation: reportsFrame2 12s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.reports-status-frame-3 {
  animation: reportsFrame3 12s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.reports-status-frame-4 {
  animation: reportsFrame4 12s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.reports-demo-screen {
  position: absolute;
  inset: 0;
  background: hsl(var(--background));
  transform-origin: 45% 6%;
}

.reports-screen-reports {
  animation: reportsScreenZoom1 12s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.home-screen {
  animation: reportsScreenZoom2 12s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.revision-screen {
  animation: reportsScreenZoom4 12s cubic-bezier(.4, 0, .2, 1) 2 both;
}

.reports-demo-sidebar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 38px;
  border-right: 1px solid hsl(var(--border));
  background: hsl(var(--card));
}

.reports-demo-sidebar::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 54px;
  width: 13px;
  height: 270px;
  background: repeating-linear-gradient(to bottom, hsl(var(--muted-foreground)) 0 14px, transparent 14px 38px);
  opacity: .75;
}

.reports-demo-topbar {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px 0 54px;
  border-bottom: 1px solid hsl(var(--border));
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
  font-size: 13px;
}

.reports-demo-topbar strong {
  min-width: 260px;
  font-size: 14px;
}

.status-chip,
.status-dropdown {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid hsl(var(--status-analysis-border));
  border-radius: 999px;
  background: hsl(var(--status-analysis-bg));
  color: hsl(var(--brand-primary));
  padding: 5px 12px;
  font-weight: 700;
}

.status-chip.orange {
  border-color: hsl(var(--status-review-border));
  background: hsl(var(--status-review-bg));
  color: hsl(var(--status-review));
}

.status-dropdown {
  border-radius: 7px;
}

.status-dropdown.orange {
  border-color: hsl(var(--status-review-border));
  background: hsl(var(--status-review-bg));
  color: hsl(var(--status-review));
}

.topbar-tab {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  border-radius: 6px;
  padding: 0 11px;
  font-weight: 700;
}

.reports-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding: 48px 40px 0 140px;
}

.revision-reports-grid {
  padding: 48px 36px 0 130px;
}

.report-tile {
  min-height: 210px;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.report-tile.generated {
  border-color: hsl(var(--status-participate-border));
  background: hsl(var(--status-participate-bg));
}

.report-tile strong {
  float: right;
  border-radius: 999px;
  background: hsl(var(--status-participate));
  color: hsl(var(--primary-foreground));
  padding: 4px 12px;
  font-size: 11px;
}

.report-tile h5 {
  margin: 18px 0 10px;
  font-size: 15px;
}

.report-tile p {
  color: hsl(215 16% 25%);
  font-size: 12px;
}

.report-tile button {
  min-height: 34px;
  border: 1px solid hsl(var(--border));
  border-radius: 6px;
  background: hsl(var(--card));
  padding: 0 18px;
  font-weight: 700;
}

.report-tile button + button {
  margin-left: 8px;
  background: hsl(var(--brand-primary));
  color: hsl(var(--primary-foreground));
}

.report-tile.pending button {
  width: 100%;
  margin-top: 42px;
  background: hsl(224 73% 73%);
  color: hsl(var(--primary-foreground));
}

.wrench-icon {
  background: hsl(var(--status-participate-bg));
  --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='m22 19.6-6.3-6.3a6.5 6.5 0 0 1-8-8L11 8.6 8.6 11 5.2 7.6 7.6 5.2 4.3 1.9a6.5 6.5 0 0 1 8 8l6.3 6.3a2.4 2.4 0 0 1-3.4 3.4z'/%3E%3C/svg%3E");
}

.wrench-icon::before {
  background: hsl(var(--status-participate));
}

.tile-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: hsl(var(--brand-primary-light));
}

.tile-icon::before {
  content: "";
  width: 24px;
  height: 24px;
  background: hsl(var(--brand-primary));
  mask: var(--icon) center / contain no-repeat;
  -webkit-mask: var(--icon) center / contain no-repeat;
}

.money-icon,
.truck-icon {
  background: hsl(var(--status-participate-bg));
}

.money-icon::before,
.truck-icon::before {
  background: hsl(var(--status-participate));
}

.magic-icon {
  --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='m19 2 1.2 2.8L23 6l-2.8 1.2L19 10l-1.2-2.8L15 6l2.8-1.2L19 2zM9 4l2 5 5 2-5 2-2 5-2-5-5-2 5-2 2-5zm9 10 1 2 2 1-2 1-1 2-1-2-2-1 2-1 1-2z'/%3E%3C/svg%3E");
}

.money-icon {
  --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 16h-2v-2.1c-1.7-.3-3-1.3-3-2.9h2c0 .7.8 1.2 2 1.2s2-.5 2-1.2c0-.8-.7-1-2.4-1.4C9.9 11.2 8.2 10.6 8.2 8.7c0-1.5 1.2-2.6 2.8-2.9V4h2v1.8c1.7.3 2.7 1.4 2.8 2.9h-2c-.1-.7-.7-1.1-1.8-1.1-1.1 0-1.7.4-1.7 1.1 0 .7.7.9 2.4 1.3 1.8.4 3.4 1.1 3.4 3 0 1.6-1.2 2.7-3 3V18z'/%3E%3C/svg%3E");
}

.truck-icon {
  --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M3 5h11v9h2.2l2-3H21v6h-2a2.5 2.5 0 0 1-5 0H9a2.5 2.5 0 0 1-5 0H3V5zm13 2v5h1.1l1.3-2H20V7h-4zM6.5 18a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm10 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z'/%3E%3C/svg%3E");
}

.home-stage {
  position: relative;
  height: calc(100% - 44px);
  padding: 54px 34px 24px 72px;
}

.status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.status-dot {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 999px;
}

.blue-dot {
  background: hsl(var(--brand-primary));
}

.orange-dot {
  background: hsl(var(--status-review));
}

.green-dot {
  background: hsl(var(--status-participate));
}

.red-dot {
  background: hsl(var(--destructive));
}

.stage-track {
  position: absolute;
  top: 40px;
  left: 44%;
  display: flex;
  gap: 60px;
  color: hsl(var(--muted-foreground));
  font-weight: 700;
  font-size: 12px;
}

.stage {
  display: grid;
  place-items: center;
  gap: 6px;
}

.stage::before {
  content: "";
  width: 42px;
  height: 42px;
  border: 2px solid hsl(var(--border));
  border-radius: 999px;
  background: hsl(var(--muted));
}

.stage.active {
  color: hsl(var(--brand-primary));
}

.stage.active::before,
.stage.complete::before {
  border-color: hsl(var(--brand-primary));
  background: hsl(var(--brand-primary));
  box-shadow: 0 0 0 6px hsl(var(--brand-primary) / .14);
}

.stage.active.orange {
  color: hsl(var(--status-review));
}

.stage.active.orange::before {
  border-color: hsl(var(--status-review));
  background: hsl(var(--status-review));
  box-shadow: 0 0 0 6px hsl(var(--status-review) / .16);
}

.home-panels,
.revision-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 52px;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  overflow: hidden;
}

.home-panels section,
.revision-panels section {
  min-height: 160px;
  padding: 16px;
  border-right: 1px solid hsl(var(--border));
}

.home-panels h5,
.revision-panels h5 {
  margin: 0 0 12px;
}

.suggested-module {
  border: 1px solid hsl(var(--status-analysis-border));
  border-radius: var(--radius);
  background: hsl(var(--brand-primary-light));
  color: hsl(var(--brand-primary));
  padding: 14px;
  font-weight: 700;
}

.suggested-module span {
  float: right;
}

.home-panels button {
  display: block;
  margin: 40px auto 0;
  border: 1px solid hsl(var(--status-analysis-border));
  border-radius: 6px;
  background: hsl(var(--card));
  color: hsl(var(--brand-primary));
  padding: 7px 18px;
  font-weight: 700;
}

.dropdown-stage {
  padding-top: 38px;
}

.status-menu {
  position: absolute;
  left: 92px;
  top: 72px;
  z-index: 2;
  width: 250px;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
  box-shadow: var(--shadow-md);
  padding: 6px;
}

.menu-item {
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 6px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 700;
}

.menu-item.selected {
  background: hsl(var(--brand-primary-light));
  color: hsl(var(--brand-primary));
}

.menu-item.muted {
  color: hsl(var(--muted-foreground));
  opacity: .72;
}

.revision-stage {
  padding-top: 38px;
}

.revision-active {
  left: 40%;
}

.checklist-lines span {
  display: block;
  height: 9px;
  margin-top: 12px;
  border-radius: 999px;
  background: hsl(var(--border-hover));
}

.reviewer-callout {
  position: absolute;
  left: 70px;
  bottom: 18px;
  width: min(470px, calc(100% - 120px));
  border: 1px solid hsl(var(--status-analysis-border));
  border-radius: var(--radius);
  background: hsl(var(--brand-primary-light));
  padding: 14px;
}

.reviewer-callout strong {
  display: block;
  margin-bottom: 8px;
}

.reviewer-callout p {
  color: hsl(var(--muted-foreground));
  font-size: 12px;
}

.reviewer-callout small {
  display: block;
  margin-top: 10px;
  color: hsl(var(--muted-foreground));
}

.reviewer-callout span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  background: hsl(var(--card));
  padding: 0 10px;
  margin: 8px 6px 0 0;
  font-size: 11px;
}

.reports-status-cursor {
  position: absolute;
  z-index: 15;
  width: 38px;
  height: 38px;
  color: hsl(var(--foreground));
  animation: reportsStatusCursor 12s cubic-bezier(.4, 0, .2, 1) 2 both;
  filter: drop-shadow(0 2px 5px hsl(0 0% 0% / .25));
}

.reports-status-cursor::before {
  content: "";
  display: block;
  width: 38px;
  height: 38px;
  background: hsl(var(--background));
  clip-path: polygon(8% 0, 8% 82%, 30% 62%, 43% 100%, 58% 94%, 45% 57%, 72% 57%);
}

.reports-status-cursor::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: hsl(var(--foreground));
  clip-path: polygon(8% 0, 8% 82%, 30% 62%, 43% 100%, 58% 94%, 45% 57%, 72% 57%, 68% 51%, 37% 51%, 50% 90%, 45% 92%, 32% 55%, 14% 70%, 14% 14%);
}

.reports-status-ring {
  position: absolute;
  z-index: 14;
  width: 52px;
  height: 52px;
  border: 3px solid hsl(var(--brand-primary));
  border-radius: 999px;
  opacity: 0;
  box-shadow: 0 0 0 5px hsl(var(--brand-primary) / .12);
  transform: translate(-50%, -50%) scale(.65);
}

.reports-ring-1 {
  left: var(--reports-inicio-x);
  top: var(--reports-inicio-y);
  animation: reportsRing1 12s ease-in-out 2 both;
}

.reports-ring-2 {
  left: var(--reports-status-x);
  top: var(--reports-status-y);
  animation: reportsRing2 12s ease-in-out 2 both;
}

.reports-ring-3 {
  left: var(--reports-revision-x);
  top: var(--reports-revision-y);
  border-color: hsl(var(--status-review));
  box-shadow: 0 0 0 5px hsl(var(--status-review) / .14);
  animation: reportsRing3 12s ease-in-out 2 both;
}

.reports-review-focus {
  position: absolute;
  left: 66px;
  bottom: 16px;
  z-index: 14;
  width: min(500px, calc(100% - 128px));
  height: 150px;
  border-radius: 18px;
  opacity: 0;
  background: radial-gradient(closest-side, hsl(var(--brand-primary) / .24), transparent 78%);
  filter: blur(1px);
  animation: reportsReviewHighlight 12s ease-in-out 2 both;
  pointer-events: none;
}

@keyframes demoZoom {
  0%,
  16% {
    transform: scale(1);
  }

  42%,
  100% {
    transform: scale(var(--demo-zoom));
  }
}

@keyframes demoCursor {
  0% {
    left: var(--cursor-start-x);
    top: var(--cursor-start-y);
    opacity: 0;
    transform: scale(.94);
  }

  12% {
    opacity: 1;
  }

  38%,
  54% {
    left: var(--target-x);
    top: var(--target-y);
    opacity: 1;
    transform: scale(1);
  }

  60% {
    left: var(--target-x);
    top: var(--target-y);
    opacity: 1;
    transform: scale(.86);
  }

  68%,
  100% {
    left: var(--target-x);
    top: var(--target-y);
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes demoClickRing {
  0%,
  54% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.6);
  }

  62% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  78%,
  100% {
    opacity: .22;
    transform: translate(-50%, -50%) scale(1.55);
  }
}

@keyframes twoStepFirstFrame {
  0%,
  10% {
    opacity: 1;
    transform: scale(1);
  }

  28%,
  58% {
    opacity: 1;
    transform: scale(var(--demo-zoom));
  }

  66%,
  100% {
    opacity: 0;
    transform: scale(var(--demo-zoom));
  }
}

@keyframes twoStepSecondFrame {
  0%,
  58% {
    opacity: 0;
    transform: scale(.985);
  }

  68%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes twoStepCursor {
  0% {
    left: var(--cursor-start-x);
    top: var(--cursor-start-y);
    opacity: 0;
    transform: scale(.94);
  }

  10% {
    opacity: 1;
  }

  24%,
  32% {
    left: var(--target-x);
    top: var(--target-y);
    opacity: 1;
    transform: scale(1);
  }

  36% {
    left: var(--target-x);
    top: var(--target-y);
    opacity: 1;
    transform: scale(.86);
  }

  42% {
    left: var(--target-x);
    top: var(--target-y);
    opacity: 1;
    transform: scale(1);
  }

  54%,
  60% {
    left: var(--target-2-x);
    top: var(--target-2-y);
    opacity: 1;
    transform: scale(1);
  }

  64% {
    left: var(--target-2-x);
    top: var(--target-2-y);
    opacity: 1;
    transform: scale(.86);
  }

  70% {
    left: var(--target-2-x);
    top: var(--target-2-y);
    opacity: 1;
    transform: scale(1);
  }

  82%,
  100% {
    left: var(--target-2-x);
    top: var(--target-2-y);
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes twoStepClickRing {
  0%,
  31% {
    left: var(--target-x);
    top: var(--target-y);
    opacity: 0;
    transform: translate(-50%, -50%) scale(.6);
  }

  37% {
    left: var(--target-x);
    top: var(--target-y);
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  46% {
    left: var(--target-x);
    top: var(--target-y);
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.55);
  }

  55%,
  59% {
    left: var(--target-2-x);
    top: var(--target-2-y);
    opacity: 0;
    transform: translate(-50%, -50%) scale(.6);
  }

  65% {
    left: var(--target-2-x);
    top: var(--target-2-y);
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  78% {
    left: var(--target-2-x);
    top: var(--target-2-y);
    opacity: .18;
    transform: translate(-50%, -50%) scale(1.45);
  }

  100% {
    left: var(--target-2-x);
    top: var(--target-2-y);
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.45);
  }
}

@keyframes draftFlowFirstFrame {
  0%,
  29% {
    opacity: 1;
    transform: scale(1);
  }

  36%,
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes draftFlowSecondFrame {
  0%,
  31% {
    opacity: 0;
    transform: scale(.992);
  }

  38%,
  66% {
    opacity: 1;
    transform: scale(1);
  }

  73%,
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes draftFlowThirdFrame {
  0%,
  68% {
    opacity: 0;
    transform: scale(.992);
  }

  76%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes draftFlowCursor {
  0% {
    left: var(--cursor-start-x);
    top: var(--cursor-start-y);
    opacity: 0;
    transform: scale(.94);
  }

  9% {
    opacity: 1;
  }

  20%,
  27% {
    left: var(--target-x);
    top: var(--target-y);
    opacity: 1;
    transform: scale(1);
  }

  31% {
    left: var(--target-x);
    top: var(--target-y);
    opacity: 1;
    transform: scale(.86);
  }

  39% {
    left: var(--target-x);
    top: var(--target-y);
    opacity: 1;
    transform: scale(1);
  }

  54%,
  62% {
    left: var(--target-2-x);
    top: var(--target-2-y);
    opacity: 1;
    transform: scale(1);
  }

  66% {
    left: var(--target-2-x);
    top: var(--target-2-y);
    opacity: 1;
    transform: scale(.86);
  }

  73% {
    left: var(--target-2-x);
    top: var(--target-2-y);
    opacity: 1;
    transform: scale(1);
  }

  84%,
  100% {
    left: var(--target-2-x);
    top: var(--target-2-y);
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes draftFlowClickRing {
  0%,
  26% {
    left: var(--target-x);
    top: var(--target-y);
    opacity: 0;
    transform: translate(-50%, -50%) scale(.6);
  }

  32% {
    left: var(--target-x);
    top: var(--target-y);
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  41% {
    left: var(--target-x);
    top: var(--target-y);
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.55);
  }

  58%,
  63% {
    left: var(--target-2-x);
    top: var(--target-2-y);
    opacity: 0;
    transform: translate(-50%, -50%) scale(.6);
  }

  68% {
    left: var(--target-2-x);
    top: var(--target-2-y);
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  82%,
  100% {
    left: var(--target-2-x);
    top: var(--target-2-y);
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.45);
  }
}

@keyframes dateFrame1 {
  0%,
  10% {
    opacity: 1;
  }

  13%,
  100% {
    opacity: 0;
  }
}

@keyframes dateFrame2 {
  0%,
  11% {
    opacity: 0;
  }

  14%,
  63% {
    opacity: 1;
  }

  66%,
  100% {
    opacity: 0;
  }
}

@keyframes dateFrame3 {
  0%,
  64% {
    opacity: 0;
  }

  67%,
  81% {
    opacity: 1;
  }

  84%,
  100% {
    opacity: 0;
  }
}

@keyframes dateFrame4 {
  0%,
  82% {
    opacity: 0;
  }

  85%,
  91% {
    opacity: 1;
  }

  94%,
  100% {
    opacity: 0;
  }
}

@keyframes dateFrame5 {
  0%,
  92% {
    opacity: 0;
  }

  95%,
  100% {
    opacity: 1;
  }
}

@keyframes wrongDayPulse {
  0%,
  15%,
  51%,
  100% {
    color: hsl(216 18% 34%);
    transform: scale(1);
  }

  20%,
  43% {
    color: hsl(var(--destructive));
    transform: scale(1.14);
  }
}

@keyframes wrongDayHalo {
  0%,
  16%,
  51%,
  100% {
    opacity: 0;
    transform: scale(.7);
  }

  22%,
  43% {
    opacity: .9;
    transform: scale(1);
  }

  48% {
    opacity: .1;
    transform: scale(1.35);
  }
}

@keyframes wrongDayUnderline {
  0%,
  16%,
  51%,
  100% {
    opacity: 0;
    transform: scaleX(.4);
  }

  22%,
  43% {
    opacity: .95;
    transform: scaleX(1);
  }
}

@keyframes extractedWrongDate {
  0%,
  16%,
  51%,
  100% {
    transform: scale(1);
  }

  22%,
  43% {
    transform: scale(1.1);
  }
}

@keyframes extractedWrongDateHalo {
  0%,
  16%,
  51%,
  100% {
    opacity: 0;
    transform: scale(.75);
  }

  22%,
  43% {
    opacity: .9;
    transform: scale(1);
  }
}

@keyframes extractedWrongDateUnderline {
  0%,
  16%,
  51%,
  100% {
    opacity: 0;
    transform: scaleX(.4);
  }

  22%,
  43% {
    opacity: .95;
    transform: scaleX(1);
  }
}

@keyframes correctedDateGlow {
  0%,
  84%,
  100% {
    box-shadow: none;
  }

  87%,
  92% {
    box-shadow: 0 0 0 4px hsl(var(--brand-primary) / .16);
  }
}

@keyframes deleteInitialDate {
  0%,
  70% {
    opacity: 1;
  }

  75%,
  100% {
    opacity: 0;
  }
}

@keyframes typeCorrectedDate {
  0%,
  75% {
    opacity: 0;
  }

  80%,
  100% {
    opacity: 1;
  }
}

@keyframes caretBlink {
  0%,
  48% {
    opacity: 1;
  }

  49%,
  100% {
    opacity: 0;
  }
}

@keyframes dateCorrectionCursor {
  0% {
    left: 62%;
    top: 72%;
    opacity: 0;
    transform: scale(.95);
  }

  5% {
    opacity: 1;
  }

  9%,
  11% {
    left: 79px;
    top: 101px;
    opacity: 1;
    transform: scale(1);
  }

  12% {
    left: 79px;
    top: 101px;
    opacity: 1;
    transform: scale(.86);
  }

  14% {
    left: 79px;
    top: 101px;
    opacity: 1;
    transform: scale(1);
  }

  18%,
  45% {
    left: 79px;
    top: 101px;
    opacity: 0;
    transform: scale(1);
  }

  48%,
  50% {
    left: calc(100% - 55px);
    top: 73px;
    opacity: 1;
    transform: scale(1);
  }

  51% {
    left: calc(100% - 55px);
    top: 73px;
    opacity: 1;
    transform: scale(.86);
  }

  53% {
    left: calc(100% - 55px);
    top: 73px;
    opacity: 0;
    transform: scale(1);
  }

  56%,
  59% {
    left: calc(100% - 28px);
    top: 73px;
    opacity: 1;
    transform: scale(1);
  }

  60% {
    left: calc(100% - 28px);
    top: 73px;
    opacity: 1;
    transform: scale(.86);
  }

  62% {
    left: calc(100% - 28px);
    top: 73px;
    opacity: 0;
    transform: scale(1);
  }

  64% {
    left: 86px;
    top: 111px;
    opacity: 0;
    transform: scale(1);
  }

  70% {
    left: 86px;
    top: 111px;
    opacity: 1;
    transform: scale(1);
  }

  72% {
    left: 86px;
    top: 111px;
    opacity: 1;
    transform: scale(.86);
  }

  75%,
  82% {
    left: 86px;
    top: 111px;
    opacity: 0;
    transform: scale(1);
  }

  86%,
  89% {
    left: 57px;
    top: 165px;
    opacity: 1;
    transform: scale(1);
  }

  90% {
    left: 57px;
    top: 165px;
    opacity: 1;
    transform: scale(.86);
  }

  94%,
  100% {
    left: 57px;
    top: 165px;
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes dateRing1 {
  0%,
  10% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.65);
  }

  13% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  20%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.45);
  }
}

@keyframes dateRing2 {
  0%,
  49% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.65);
  }

  52% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  57%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.45);
  }
}

@keyframes dateRing3 {
  0%,
  58% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.65);
  }

  61% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  67%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.45);
  }
}

@keyframes dateRing4 {
  0%,
  88% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.65);
  }

  91% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  97%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.45);
  }
}

@keyframes citationJumpFrame1 {
  0%,
  42% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0;
  }
}

@keyframes citationJumpFrame2 {
  0%,
  46% {
    opacity: 0;
  }

  54%,
  100% {
    opacity: 1;
  }
}

@keyframes citationJumpCursor {
  0% {
    left: 66%;
    top: 45%;
    opacity: 0;
    transform: scale(.95);
  }

  10% {
    opacity: 1;
  }

  24%,
  30% {
    left: calc(45% + 79px);
    top: calc(100% - 46px);
    opacity: 1;
    transform: scale(1);
  }

  34% {
    left: calc(45% + 79px);
    top: calc(100% - 46px);
    opacity: 1;
    transform: scale(.86);
  }

  40% {
    left: calc(45% + 79px);
    top: calc(100% - 46px);
    opacity: 1;
    transform: scale(1);
  }

  48%,
  100% {
    left: calc(45% + 79px);
    top: calc(100% - 46px);
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes citationJumpRing {
  0%,
  31% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.65);
  }

  36% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  48%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.45);
  }
}

@keyframes sourceHighlightPulse {
  0%,
  54% {
    box-shadow: none;
  }

  62%,
  82% {
    box-shadow: 0 0 0 5px hsl(var(--brand-primary) / .16);
  }

  100% {
    box-shadow: none;
  }
}

@keyframes reportsFrame1 {
  0%,
  20% {
    opacity: 1;
  }

  26%,
  100% {
    opacity: 0;
  }
}

@keyframes reportsFrame2 {
  0%,
  25% {
    opacity: 0;
  }

  31%,
  48% {
    opacity: 1;
  }

  54%,
  100% {
    opacity: 0;
  }
}

@keyframes reportsFrame3 {
  0%,
  53% {
    opacity: 0;
  }

  58%,
  70% {
    opacity: 1;
  }

  76%,
  100% {
    opacity: 0;
  }
}

@keyframes reportsFrame4 {
  0%,
  75% {
    opacity: 0;
  }

  82%,
  100% {
    opacity: 1;
  }
}

@keyframes reportsScreenZoom1 {
  0%,
  6% {
    transform: scale(1);
  }

  12%,
  18% {
    transform: scale(1.08);
    transform-origin: 37% 5%;
  }

  24%,
  100% {
    transform: scale(1);
  }
}

@keyframes reportsScreenZoom2 {
  0%,
  46% {
    transform: scale(1);
    transform-origin: 14% 14%;
  }

  54%,
  62% {
    transform: scale(1.22);
    transform-origin: 14% 14%;
  }

  70%,
  100% {
    transform: scale(1);
    transform-origin: 14% 14%;
  }
}

@keyframes reportsScreenZoom4 {
  0%,
  83% {
    transform: scale(1);
    transform-origin: 30% 82%;
  }

  92%,
  100% {
    transform: scale(1.08);
    transform-origin: 30% 82%;
  }
}

@keyframes reportsStatusCursor {
  0% {
    left: 26%;
    top: 60%;
    opacity: 0;
    transform: scale(.95);
  }

  7% {
    opacity: 1;
  }

  11%,
  15% {
    left: calc(var(--reports-inicio-x) - 7px);
    top: calc(var(--reports-inicio-y) - 6px);
    opacity: 1;
    transform: scale(1);
  }

  17% {
    left: calc(var(--reports-inicio-x) - 7px);
    top: calc(var(--reports-inicio-y) - 6px);
    opacity: 1;
    transform: scale(.86);
  }

  22%,
  32% {
    left: calc(var(--reports-inicio-x) - 7px);
    top: calc(var(--reports-inicio-y) - 6px);
    opacity: 0;
    transform: scale(1);
  }

  39%,
  43% {
    left: calc(var(--reports-status-x) - 7px);
    top: calc(var(--reports-status-y) - 6px);
    opacity: 1;
    transform: scale(1);
  }

  45% {
    left: calc(var(--reports-status-x) - 7px);
    top: calc(var(--reports-status-y) - 6px);
    opacity: 1;
    transform: scale(.86);
  }

  50%,
  56% {
    left: calc(var(--reports-status-x) - 7px);
    top: calc(var(--reports-status-y) - 6px);
    opacity: 0;
    transform: scale(1);
  }

  61%,
  65% {
    left: calc(var(--reports-revision-x) - 7px);
    top: calc(var(--reports-revision-y) - 6px);
    opacity: 1;
    transform: scale(1);
  }

  67% {
    left: calc(var(--reports-revision-x) - 7px);
    top: calc(var(--reports-revision-y) - 6px);
    opacity: 1;
    transform: scale(.86);
  }

  73%,
  100% {
    left: calc(var(--reports-revision-x) - 7px);
    top: calc(var(--reports-revision-y) - 6px);
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes reportsRing1 {
  0%,
  15% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.65);
  }

  18% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  25%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.45);
  }
}

@keyframes reportsRing2 {
  0%,
  43% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.65);
  }

  46% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  53%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.45);
  }
}

@keyframes reportsRing3 {
  0%,
  65% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.65);
  }

  68% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  76%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.45);
  }
}

@keyframes reportsReviewHighlight {
  0%,
  84% {
    opacity: 0;
    transform: scale(.98);
  }

  90%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes qnaDetailFrame1 {
  0%,
  8% {
    opacity: 1;
    transform: scale(1);
  }

  17%,
  27% {
    opacity: 1;
    transform: scale(1.08);
  }

  34%,
  100% {
    opacity: 0;
    transform: scale(1.08);
  }
}

@keyframes qnaDetailFrame2 {
  0%,
  31% {
    opacity: 0;
    transform: scale(.985);
  }

  38%,
  48% {
    opacity: 1;
    transform: scale(1);
  }

  56%,
  66% {
    opacity: 1;
    transform: scale(1.06);
  }

  74%,
  100% {
    opacity: 0;
    transform: scale(1.06);
  }
}

@keyframes qnaDetailFrame3 {
  0%,
  69% {
    opacity: 0;
    transform: scale(.985);
  }

  78%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes qnaDetailCursor {
  0% {
    left: 58%;
    top: 46%;
    opacity: 0;
    transform: scale(.95);
  }

  10% {
    opacity: 1;
  }

  18%,
  23% {
    left: calc(47.3% - 7px);
    top: calc(72% - 6px);
    opacity: 1;
    transform: scale(1);
  }

  25% {
    left: calc(47.3% - 7px);
    top: calc(72% - 6px);
    opacity: 1;
    transform: scale(.86);
  }

  31%,
  46% {
    left: calc(47.3% - 7px);
    top: calc(72% - 6px);
    opacity: 0;
    transform: scale(1);
  }

  54% {
    opacity: 1;
  }

  58%,
  63% {
    left: calc(22% - 7px);
    top: calc(31.5% - 6px);
    opacity: 1;
    transform: scale(1);
  }

  65% {
    left: calc(22% - 7px);
    top: calc(31.5% - 6px);
    opacity: 1;
    transform: scale(.86);
  }

  72%,
  100% {
    left: calc(22% - 7px);
    top: calc(31.5% - 6px);
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes qnaDetailRing1 {
  0%,
  23% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.65);
  }

  27% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  34%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.45);
  }
}

@keyframes qnaDetailRing2 {
  0%,
  63% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.65);
  }

  67% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  75%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.45);
  }
}

@keyframes qnaReferenceFrame1 {
  0%,
  8% {
    opacity: 1;
    transform: scale(1);
  }

  17%,
  27% {
    opacity: 1;
    transform: scale(1);
  }

  34%,
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes qnaReferenceFrame2 {
  0%,
  31% {
    opacity: 0;
    transform: scale(.985);
  }

  38%,
  48% {
    opacity: 1;
    transform: scale(1);
  }

  56%,
  66% {
    opacity: 1;
    transform: scale(1);
  }

  74%,
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes qnaReferenceFrame3 {
  0%,
  69% {
    opacity: 0;
    transform: scale(.985);
  }

  78%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes qnaReferenceCursor {
  0% {
    left: 28%;
    top: 45%;
    opacity: 0;
    transform: scale(.95);
  }

  10% {
    opacity: 1;
  }

  18%,
  23% {
    left: calc(5.8% - 7px);
    top: calc(10.5% - 6px);
    opacity: 1;
    transform: scale(1);
  }

  25% {
    left: calc(5.8% - 7px);
    top: calc(10.5% - 6px);
    opacity: 1;
    transform: scale(.86);
  }

  31%,
  46% {
    left: calc(5.8% - 7px);
    top: calc(10.5% - 6px);
    opacity: 0;
    transform: scale(1);
  }

  54% {
    opacity: 1;
  }

  58%,
  63% {
    left: calc(18% - 7px);
    top: calc(84% - 6px);
    opacity: 1;
    transform: scale(1);
  }

  65% {
    left: calc(18% - 7px);
    top: calc(84% - 6px);
    opacity: 1;
    transform: scale(.86);
  }

  72%,
  100% {
    left: calc(18% - 7px);
    top: calc(84% - 6px);
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes qnaReferenceRing1 {
  0%,
  23% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.65);
  }

  27% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  34%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.45);
  }
}

@keyframes qnaReferenceRing2 {
  0%,
  63% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.65);
  }

  67% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  75%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.45);
  }
}

@keyframes qnaDraftFrame1 {
  0%,
  8% {
    opacity: 1;
    transform: scale(1);
  }

  13%,
  19% {
    opacity: 1;
    transform: scale(1);
  }

  25%,
  46% {
    opacity: 0;
    transform: scale(1);
  }

  52%,
  70% {
    opacity: 1;
    transform: scale(1);
  }

  78%,
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes qnaDraftFrame2 {
  0%,
  23% {
    opacity: 0;
    transform: scale(.985);
  }

  29%,
  39% {
    opacity: 1;
    transform: scale(1);
  }

  45%,
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes qnaDraftFrame3 {
  0%,
  75% {
    opacity: 0;
    transform: scale(.985);
  }

  82%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes qnaDraftCursor {
  0% {
    left: 69%;
    top: 48%;
    opacity: 0;
    transform: scale(.95);
  }

  7% {
    opacity: 1;
  }

  13%,
  17% {
    left: calc(80.5% - 7px);
    top: calc(68.2% - 6px);
    opacity: 1;
    transform: scale(1);
  }

  19% {
    left: calc(80.5% - 7px);
    top: calc(68.2% - 6px);
    opacity: 1;
    transform: scale(.86);
  }

  23%,
  31% {
    left: calc(80.5% - 7px);
    top: calc(68.2% - 6px);
    opacity: 0;
    transform: scale(1);
  }

  36%,
  40% {
    left: calc(76.6% - 7px);
    top: calc(70.2% - 6px);
    opacity: 1;
    transform: scale(1);
  }

  42% {
    left: calc(76.6% - 7px);
    top: calc(70.2% - 6px);
    opacity: 1;
    transform: scale(.86);
  }

  47%,
  62% {
    left: calc(76.6% - 7px);
    top: calc(70.2% - 6px);
    opacity: 0;
    transform: scale(1);
  }

  66%,
  70% {
    left: calc(67.3% - 7px);
    top: calc(3.5% - 6px);
    opacity: 1;
    transform: scale(1);
  }

  72% {
    left: calc(67.3% - 7px);
    top: calc(3.5% - 6px);
    opacity: 1;
    transform: scale(.86);
  }

  78%,
  100% {
    left: calc(67.3% - 7px);
    top: calc(3.5% - 6px);
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes qnaDraftRing1 {
  0%,
  17% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.65);
  }

  21% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  27%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.45);
  }
}

@keyframes qnaDraftRing2 {
  0%,
  40% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.65);
  }

  44% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  50%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.45);
  }
}

@keyframes qnaDraftRing3 {
  0%,
  70% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.65);
  }

  74% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  80%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.45);
  }
}

@keyframes qnaDraftNavAttention {
  0%,
  53% {
    opacity: 0;
    transform: scale(.96);
  }

  58%,
  72% {
    opacity: 1;
    transform: scale(1);
  }

  78%,
  100% {
    opacity: 0;
    transform: scale(1.02);
  }
}

@keyframes qnaDraftFinalAttention {
  0%,
  82% {
    opacity: 0;
    transform: scale(.96);
  }

  88%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes qnaCompetitiveFrame1 {
  0%,
  9% {
    opacity: 1;
    transform: scale(1);
  }

  15%,
  29% {
    opacity: 1;
    transform: scale(1);
  }

  36%,
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes qnaCompetitiveFrame2 {
  0%,
  33% {
    opacity: 0;
    transform: scale(.985);
  }

  40%,
  58% {
    opacity: 1;
    transform: scale(1);
  }

  66%,
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes qnaCompetitiveFrame3 {
  0%,
  62% {
    opacity: 0;
    transform: scale(.985);
  }

  72%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes qnaCompetitiveCursor {
  0% {
    left: 70%;
    top: 58%;
    opacity: 0;
    transform: scale(.95);
  }

  12% {
    opacity: 1;
  }

  18%,
  24% {
    left: calc(79.9% - 7px);
    top: calc(73.3% - 6px);
    opacity: 1;
    transform: scale(1);
  }

  27% {
    left: calc(79.9% - 7px);
    top: calc(73.3% - 6px);
    opacity: 1;
    transform: scale(.86);
  }

  34%,
  49% {
    left: calc(79.9% - 7px);
    top: calc(73.3% - 6px);
    opacity: 0;
    transform: scale(1);
  }

  55%,
  60% {
    left: calc(90.8% - 7px);
    top: calc(69% - 6px);
    opacity: 1;
    transform: scale(1);
  }

  63% {
    left: calc(90.8% - 7px);
    top: calc(69% - 6px);
    opacity: 1;
    transform: scale(.86);
  }

  70%,
  100% {
    left: calc(90.8% - 7px);
    top: calc(69% - 6px);
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes qnaCompetitiveRing1 {
  0%,
  24% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.65);
  }

  29% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  36%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.45);
  }
}

@keyframes qnaCompetitiveRing2 {
  0%,
  60% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.65);
  }

  65% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  72%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.45);
  }
}

@keyframes qnaCompetitiveActionAttention {
  0%,
  8% {
    opacity: 0;
    transform: scale(.96);
  }

  14%,
  28% {
    opacity: 1;
    transform: scale(1);
  }

  36%,
  100% {
    opacity: 0;
    transform: scale(1.02);
  }
}

@keyframes proposalFilterFrame1 {
  0%,
  26% {
    opacity: 1;
    transform: scale(1);
  }

  34%,
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes proposalFilterFrame2 {
  0%,
  30% {
    opacity: 0;
    transform: scale(1);
  }

  38%,
  67% {
    opacity: 1;
    transform: scale(1);
  }

  76%,
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes proposalFilterFrame3 {
  0%,
  72% {
    opacity: 0;
    transform: scale(1);
  }

  82%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes proposalFilterCursor {
  0% {
    left: 78%;
    top: 22%;
    opacity: 0;
    transform: scale(.95);
  }

  10% {
    opacity: 1;
  }

  17%,
  23% {
    left: calc(88.7% - 7px);
    top: calc(17.1% - 6px);
    opacity: 1;
    transform: scale(1);
  }

  26% {
    left: calc(88.7% - 7px);
    top: calc(17.1% - 6px);
    opacity: 1;
    transform: scale(.86);
  }

  32%,
  50% {
    left: calc(88.7% - 7px);
    top: calc(17.1% - 6px);
    opacity: 0;
    transform: scale(1);
  }

  57%,
  64% {
    left: calc(88.7% - 7px);
    top: calc(80.3% - 6px);
    opacity: 1;
    transform: scale(1);
  }

  67% {
    left: calc(88.7% - 7px);
    top: calc(80.3% - 6px);
    opacity: 1;
    transform: scale(.86);
  }

  75%,
  100% {
    left: calc(88.7% - 7px);
    top: calc(80.3% - 6px);
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes proposalFilterRing1 {
  0%,
  23% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.65);
  }

  28% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  35%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.45);
  }
}

@keyframes proposalFilterRing2 {
  0%,
  64% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.65);
  }

  69% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  77%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.45);
  }
}

@keyframes proposalAssignFrame1 {
  0%,
  23% {
    opacity: 1;
    transform: scale(1);
  }

  31%,
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes proposalAssignFrame2 {
  0%,
  28% {
    opacity: 0;
    transform: scale(1);
  }

  36%,
  50% {
    opacity: 1;
    transform: scale(1);
  }

  58%,
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes proposalAssignFrame3 {
  0%,
  55% {
    opacity: 0;
    transform: scale(1);
  }

  63%,
  76% {
    opacity: 1;
    transform: scale(1);
  }

  84%,
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes proposalAssignFrame4 {
  0%,
  81% {
    opacity: 0;
    transform: scale(1);
  }

  90%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes proposalAssignCursor {
  0% {
    left: 12%;
    top: 30%;
    opacity: 0;
    transform: scale(.95);
  }

  8% {
    opacity: 1;
  }

  15%,
  21% {
    left: calc(4% - 7px);
    top: calc(25% - 6px);
    opacity: 1;
    transform: scale(1);
  }

  24% {
    left: calc(4% - 7px);
    top: calc(25% - 6px);
    opacity: 1;
    transform: scale(.86);
  }

  30%,
  40% {
    left: calc(4% - 7px);
    top: calc(25% - 6px);
    opacity: 0;
    transform: scale(1);
  }

  45%,
  51% {
    left: calc(61.4% - 7px);
    top: calc(81.7% - 6px);
    opacity: 1;
    transform: scale(1);
  }

  54% {
    left: calc(61.4% - 7px);
    top: calc(81.7% - 6px);
    opacity: 1;
    transform: scale(.86);
  }

  60%,
  67% {
    left: calc(61.4% - 7px);
    top: calc(81.7% - 6px);
    opacity: 0;
    transform: scale(1);
  }

  72%,
  78% {
    left: calc(67.5% - 7px);
    top: calc(93.2% - 6px);
    opacity: 1;
    transform: scale(1);
  }

  81% {
    left: calc(67.5% - 7px);
    top: calc(93.2% - 6px);
    opacity: 1;
    transform: scale(.86);
  }

  88%,
  100% {
    left: calc(67.5% - 7px);
    top: calc(93.2% - 6px);
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes proposalAssignRing1 {
  0%,
  21% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.65);
  }

  26% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  33%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.45);
  }
}

@keyframes proposalAssignRing2 {
  0%,
  51% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.65);
  }

  56% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  63%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.45);
  }
}

@keyframes proposalAssignRing3 {
  0%,
  78% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.65);
  }

  83% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  90%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.45);
  }
}

@keyframes proposalUploadFrame1 {
  0%,
  16% {
    opacity: 1;
    transform: scale(1);
  }

  22%,
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes proposalUploadFrame2 {
  0%,
  19% {
    opacity: 0;
    transform: scale(1);
  }

  25%,
  35% {
    opacity: 1;
    transform: scale(1);
  }

  41%,
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes proposalUploadFrame3 {
  0%,
  38% {
    opacity: 0;
    transform: scale(1);
  }

  44%,
  76% {
    opacity: 1;
    transform: scale(1);
  }

  82%,
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes proposalUploadFrame4 {
  0%,
  79% {
    opacity: 0;
    transform: scale(1);
  }

  85%,
  91% {
    opacity: 1;
    transform: scale(1);
  }

  96%,
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes proposalUploadFrame5 {
  0%,
  93% {
    opacity: 0;
    transform: scale(1);
  }

  98%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes proposalUploadCursor {
  0% {
    left: 14%;
    top: 33%;
    opacity: 0;
    transform: scale(.95);
  }

  6% {
    opacity: 1;
  }

  10%,
  15% {
    left: calc(7.8% - 7px);
    top: calc(30.3% - 6px);
    opacity: 1;
    transform: scale(1);
  }

  17% {
    left: calc(7.8% - 7px);
    top: calc(30.3% - 6px);
    opacity: 1;
    transform: scale(.86);
  }

  21%,
  28% {
    left: calc(7.8% - 7px);
    top: calc(30.3% - 6px);
    opacity: 0;
    transform: scale(1);
  }

  31%,
  35% {
    left: calc(51.3% - 7px);
    top: calc(77.6% - 6px);
    opacity: 1;
    transform: scale(1);
  }

  37% {
    left: calc(51.3% - 7px);
    top: calc(77.6% - 6px);
    opacity: 1;
    transform: scale(.86);
  }

  41%,
  68% {
    left: calc(51.3% - 7px);
    top: calc(77.6% - 6px);
    opacity: 0;
    transform: scale(1);
  }

  70%,
  74% {
    left: calc(87.1% - 7px);
    top: calc(33.4% - 6px);
    opacity: 1;
    transform: scale(1);
  }

  76% {
    left: calc(87.1% - 7px);
    top: calc(33.4% - 6px);
    opacity: 1;
    transform: scale(.86);
  }

  80%,
  82% {
    left: calc(87.1% - 7px);
    top: calc(33.4% - 6px);
    opacity: 0;
    transform: scale(1);
  }

  84%,
  88% {
    left: calc(86.9% - 7px);
    top: calc(46.7% - 6px);
    opacity: 1;
    transform: scale(1);
  }

  90% {
    left: calc(86.9% - 7px);
    top: calc(46.7% - 6px);
    opacity: 1;
    transform: scale(.86);
  }

  94%,
  100% {
    left: calc(86.9% - 7px);
    top: calc(46.7% - 6px);
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes proposalUploadRing1 {
  0%,
  15% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.65);
  }

  19% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  25%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.45);
  }
}

@keyframes proposalUploadRing2 {
  0%,
  35% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.65);
  }

  39% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  45%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.45);
  }
}

@keyframes proposalUploadRing3 {
  0%,
  74% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.65);
  }

  78% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  84%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.45);
  }
}

@keyframes proposalUploadRing4 {
  0%,
  88% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.65);
  }

  92% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  98%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.45);
  }
}

@keyframes proposalUploadDocumentAttention {
  0%,
  43% {
    opacity: 0;
    transform: scale(.98);
  }

  47%,
  56% {
    opacity: 1;
    transform: scale(1);
  }

  60%,
  100% {
    opacity: 0;
    transform: scale(1.02);
  }
}

@keyframes proposalUploadStatusAttention {
  0%,
  58% {
    opacity: 0;
    transform: scale(.98);
  }

  62%,
  68% {
    opacity: 1;
    transform: scale(1);
  }

  71%,
  100% {
    opacity: 0;
    transform: scale(1.02);
  }
}

@keyframes searchHit {
  0% {
    box-shadow: 0 0 0 0 hsl(var(--brand-primary) / .24);
    background: hsl(var(--brand-primary-light));
  }

  42% {
    box-shadow: 0 0 0 6px hsl(var(--brand-primary) / .12);
    background: hsl(var(--brand-primary-light));
  }

  100% {
    box-shadow: none;
    background: transparent;
  }
}

.section-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.detail-block {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card-hover));
  padding: 14px;
}

.detail-block h4 {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 20px;
}

.detail-block ul {
  margin: 0;
  padding-left: 18px;
}

.detail-block li + li {
  margin-top: 6px;
}

.detail-block p {
  font-size: 13px;
}

.guide-flow {
  display: grid;
  gap: 22px;
}

.guide-step {
  display: grid;
  gap: 14px;
  border-top: 1px solid hsl(var(--border));
  padding-top: 20px;
}

.guide-step:first-child {
  border-top: 0;
  padding-top: 0;
}

.search-hit {
  animation: searchHit 2.4s ease-out 1;
}

.step-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.step-number {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: hsl(var(--brand-primary-light));
  color: hsl(var(--brand-primary));
  font-weight: 700;
}

.guide-step h4,
.outcome-panel h4,
.recommendation-panel h4,
.security-panel h4 {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 24px;
}

.guide-step p {
  max-width: 860px;
  font-size: 14px;
}

.outcome-panel,
.recommendation-panel,
.security-panel {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card-hover));
  padding: 16px;
}

.outcome-panel p {
  font-size: 14px;
}

.recommendation-panel ul {
  margin: 0;
  padding-left: 20px;
}

.recommendation-panel li + li {
  margin-top: 9px;
}

.faq-mini {
  display: grid;
  gap: 10px;
}

.faq-mini details {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
  padding: 12px;
}

.faq-mini summary {
  cursor: pointer;
  font-weight: 700;
}

.faq-mini p {
  margin-top: 8px;
}

.module-header {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
}

.article-heading {
  display: grid;
  justify-items: center;
  gap: 10px;
  max-width: 760px;
  margin: 4px auto 8px;
  padding-bottom: 18px;
  text-align: center;
}

.article-heading .module-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
}

.article-heading h3 {
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
}

.article-heading p {
  font-size: 15px;
  line-height: 24px;
}

.module-icon-wrap {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: hsl(var(--brand-primary-light));
  color: hsl(var(--brand-primary));
}

.module-card p {
  font-size: 13px;
}

.module-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.module-card ul {
  margin: 0;
  padding-left: 18px;
  color: hsl(var(--foreground));
}

.module-card li + li {
  margin-top: 7px;
}

.step-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step-list li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 9px;
}

.step-list span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: hsl(var(--secondary));
  color: hsl(var(--muted-foreground));
  font-size: 12px;
  font-weight: 700;
}

.helpful-panel {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid hsl(var(--border));
}

.helpful-panel span {
  margin-right: auto;
  color: hsl(var(--muted-foreground));
  font-size: 13px;
}

.button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0 16px;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.button:hover {
  background: hsl(var(--brand-primary-hover));
}

.button:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

.button.secondary,
.button.outline {
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
}

.button.secondary:hover,
.button.outline:hover {
  border-color: hsl(var(--border-hover));
  background: hsl(var(--secondary));
}

.button.tiny {
  min-height: 32px;
  padding: 0 12px;
  font-size: 12px;
}

.button.yes-button {
  background: hsl(var(--status-participate));
}

.button.yes-button:hover {
  background: hsl(142 76% 31%);
}

.faq-section {
  margin-top: 24px;
  padding: 20px;
}

.faq-list {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.faq-item {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  overflow: hidden;
}

.faq-item button {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 0;
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  padding: 12px 14px;
  text-align: left;
  font-weight: 700;
  cursor: pointer;
}

.faq-item button:hover {
  background: hsl(var(--card-hover));
}

.faq-item p {
  display: none;
  padding: 0 14px 14px;
}

.faq-item.open p {
  display: block;
}

.chat-launcher {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 10;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  padding: 0 14px;
  background: hsl(var(--card));
  color: hsl(var(--accent-foreground));
  box-shadow: var(--shadow-lg);
  font-weight: 700;
  cursor: pointer;
}

.chat-panel {
  position: fixed;
  right: 22px;
  bottom: 76px;
  z-index: 11;
  width: min(420px, calc(100vw - 28px));
  height: min(620px, calc(100vh - 112px));
  display: none;
  grid-template-rows: auto 1fr auto;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  background: hsl(var(--card));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.chat-panel.open {
  display: grid;
}

.chat-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid hsl(var(--border));
}

.chat-panel header strong,
.chat-panel header small {
  display: block;
}

.chat-panel header small {
  color: hsl(var(--muted-foreground));
  font-size: 12px;
}

.chat-panel header button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  background: hsl(var(--card));
  color: hsl(var(--muted-foreground));
  cursor: pointer;
}

.chat-messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  overflow: auto;
  background: hsl(var(--muted));
}

.message {
  max-width: 88%;
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 13px;
}

.message.bot {
  align-self: flex-start;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
}

.message.bot p {
  margin: 0;
}

.chat-link {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border: 1px solid hsl(var(--primary) / .2);
  border-radius: var(--radius-sm);
  background: hsl(var(--primary) / .06);
  color: hsl(var(--primary));
  padding: 0 10px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.chat-link:hover {
  background: hsl(var(--primary) / .11);
}

.message.user {
  align-self: flex-end;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.chat-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid hsl(var(--border));
}

.chat-form input {
  min-height: 40px;
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius-sm);
  padding: 0 12px;
  outline: 0;
}

.chat-form input:focus {
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 3px hsl(var(--ring) / .14);
}

/* Help desk redesign inspired by the provided monicoai reference app. */
body {
  background:
    radial-gradient(circle at 18% 0%, hsl(var(--brand-primary) / .28), transparent 28rem),
    radial-gradient(circle at 90% 12%, hsl(271 91% 65% / .16), transparent 25rem),
    hsl(222 47% 8%);
  color: hsl(222 47% 11%);
}

.app-shell {
  background: transparent;
}

.sidebar {
  border-right-color: hsl(222 47% 18%);
  background: hsl(222 47% 9% / .94);
  box-shadow: 1px 0 0 hsl(222 47% 18% / .8);
}

.brand {
  border-radius: var(--radius-lg);
}

.brand:hover,
.brand:focus-visible {
  background: hsl(222 47% 14%);
  outline: none;
}

.brand-mark {
  box-shadow: var(--shadow-sm);
}

.brand {
  color: hsl(0 0% 100%);
}

.brand small {
  color: hsl(215 20% 72%);
}

.sidebar-toggle {
  min-height: 40px;
  background: hsl(222 47% 13%);
  border-color: hsl(222 47% 20%);
  color: hsl(215 20% 72%);
}

.module-nav {
  gap: 6px;
}

.module-nav a {
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: hsl(215 20% 72%);
  font-weight: 650;
}

.module-nav a:hover,
.module-nav a:focus-visible {
  border-color: hsl(222 47% 20%);
  background: hsl(222 47% 14%);
  color: hsl(0 0% 100%);
}

.module-nav a.active {
  border-color: hsl(var(--status-analysis-border));
  background: hsl(var(--brand-primary-light));
  color: hsl(var(--brand-primary));
  box-shadow: var(--shadow-sm);
}

.content {
  background: transparent;
  padding-inline: 34px;
}

.home-view {
  max-width: 1180px;
  padding-top: 42px;
}

.home-brand {
  margin-bottom: 24px;
  color: hsl(0 0% 100%);
}

.home-brand small {
  color: hsl(215 20% 72%);
}

.home-mark {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  font-size: 48px;
}

.home-search {
  position: relative;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  overflow: hidden;
  border: 1px solid hsl(222 47% 18%);
  border-radius: 24px;
  background: hsl(222 47% 11%);
  box-shadow: 0 18px 50px hsl(222 47% 11% / .16);
  padding: 34px;
}

.home-search-copy {
  grid-column: 1 / -1;
  max-width: 720px;
  margin: 0 auto 6px;
  text-align: center;
}

.support-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  border: 1px solid hsl(var(--brand-primary) / .34);
  border-radius: 999px;
  background: hsl(var(--brand-primary) / .16);
  color: hsl(214 100% 84%);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 800;
}

.support-actions {
  display: none;
}

.home-search h1 {
  margin-top: 14px;
  color: hsl(0 0% 100%);
  font-size: 38px;
  line-height: 44px;
}

.home-search p {
  max-width: 620px;
  margin: 10px auto 0;
  color: hsl(215 20% 76%);
  font-size: 15px;
}

.search-box {
  min-height: 64px;
  border: 1px solid hsl(214 32% 91%);
  border-radius: 16px;
  background: hsl(var(--card));
  box-shadow: var(--shadow-lg);
}

.search-box:focus-within {
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 4px hsl(var(--ring) / .18), var(--shadow-lg);
}

.search-box input {
  font-size: 16px;
}

.home-search > .button {
  min-height: 64px;
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
}

.search-results.open {
  margin-top: 4px;
  border-color: hsl(214 32% 91%);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
}

.support-actions {
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0 34px;
}

.support-action-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  border: 1px solid hsl(214 32% 91%);
  border-radius: var(--radius-lg);
  background: hsl(var(--card));
  box-shadow: var(--shadow-sm);
  padding: 16px;
}

.support-action-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-lg);
  background: hsl(var(--brand-primary-light));
  color: hsl(var(--brand-primary));
}

.support-action-icon::before {
  width: 20px;
  height: 20px;
}

.support-action-card strong {
  display: block;
  color: hsl(var(--foreground));
  font-size: 14px;
  line-height: 20px;
}

.support-action-card p {
  margin-top: 4px;
  font-size: 12px;
  line-height: 18px;
}

.section-heading {
  margin-top: 28px;
  margin-bottom: 14px;
}

.section-heading h2 {
  color: hsl(0 0% 100%);
  font-size: 22px;
  line-height: 30px;
  font-weight: 800;
}

.overview-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.overview-card,
.faq-mini details,
.module-card,
.faq-section {
  border-color: hsl(214 32% 91%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.overview-card {
  min-height: 176px;
  padding: 18px;
}

.overview-card:hover,
.overview-card:focus-visible {
  border-color: hsl(var(--status-analysis-border));
  background: hsl(var(--card));
  box-shadow: 0 14px 30px hsl(222 47% 11% / .08);
  transform: translateY(-2px);
}

.overview-card .module-icon-wrap {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-lg);
}

.overview-card strong {
  font-size: 14px;
  line-height: 20px;
}

.overview-card p {
  color: hsl(215 16% 44%);
  font-size: 12px;
  line-height: 18px;
}

.faq-mini {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 10px;
}

.faq-column {
  display: grid;
  align-content: start;
  gap: 10px;
}

.faq-mini details {
  display: block;
  width: 100%;
  margin: 0;
  padding: 16px;
  align-self: start;
}

.faq-mini summary {
  list-style: none;
}

.faq-mini summary::-webkit-details-marker {
  display: none;
}

.faq-mini p {
  color: hsl(215 16% 44%);
  line-height: 1.6;
}

.detail-view {
  max-width: 1240px;
}

.back-home {
  border-radius: var(--radius);
}

.module-card {
  padding: 24px;
  background: hsl(222 47% 11%);
  border-color: hsl(222 47% 18%);
  box-shadow: 0 20px 48px hsl(222 47% 6% / .28);
}

.article-heading {
  margin-bottom: 2px;
  padding: 18px 12px 22px;
}

.article-heading h3,
.article-heading p {
  color: hsl(0 0% 100%);
}

.article-heading .module-icon-wrap {
  background: hsl(var(--brand-primary));
  color: hsl(var(--primary-foreground));
  box-shadow: 0 10px 24px hsl(var(--brand-primary) / .22);
}

.guide-step,
.clarification-feature,
.proposal-feature,
.reports-guide-layout,
.proposal-intro-panel,
.recommendation-panel,
.security-panel,
.outcome-panel,
.detail-block {
  background: hsl(var(--card));
  border: 1px solid hsl(214 32% 91%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 18px;
}

.guide-step {
  border-top: 1px solid hsl(214 32% 91%);
}

.guide-step:first-child {
  border-top: 1px solid hsl(214 32% 91%);
}

.clarification-copy,
.proposal-feature .clarification-copy,
.proposal-intro-panel,
.reports-decision-panel {
  background: hsl(210 40% 98%);
  border-color: hsl(214 32% 91%);
}

.article-heading h3 {
  font-size: 32px;
  line-height: 40px;
  font-weight: 800;
}

.detail-view {
  color: hsl(var(--foreground));
}

.guide-flow,
.clarifications-flow {
  gap: 24px;
}

.home-faq,
.module-overview {
  border: 1px solid hsl(222 47% 18%);
  border-radius: 24px;
  background: hsl(222 47% 11% / .74);
  box-shadow: 0 18px 50px hsl(222 47% 6% / .18);
  padding: 22px;
}

.home-faq + .module-overview {
  margin-top: 24px;
}

.section-heading p {
  color: hsl(215 20% 76%);
}

.overview-card,
.faq-mini details {
  background: hsl(0 0% 100% / .98);
}

.helpful-panel {
  border: 1px solid hsl(222 47% 18%);
  border-radius: var(--radius-lg);
  background: hsl(222 47% 15%);
  padding: 14px;
}

.helpful-panel span,
.helpful-panel a {
  color: hsl(214 100% 84%);
}

.helpful-panel .button.outline {
  background: transparent;
  color: hsl(0 0% 100%);
  border-color: hsl(217 91% 65% / .34);
}

.visual-card,
.micro-demo,
.clarification-copy,
.proposal-intro-panel,
.outcome-panel,
.recommendation-panel,
.security-panel,
.detail-block,
.reports-decision-panel {
  border-radius: var(--radius-lg);
}

.module-screenshot,
.micro-demo-viewport {
  border-color: hsl(214 32% 91%);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 36px hsl(222 47% 11% / .08);
}

.chat-launcher {
  min-height: 44px;
  border-color: hsl(var(--brand-primary));
  border-radius: var(--radius);
  background: hsl(var(--brand-primary));
  color: hsl(var(--primary-foreground));
}

.chat-panel {
  border-color: hsl(214 32% 91%);
  border-radius: 18px;
}

.sidebar {
  border-right-color: hsl(214 32% 91%);
  background: hsl(var(--card) / .96);
  box-shadow: 1px 0 0 hsl(214 32% 91% / .65);
}

.brand {
  color: hsl(var(--foreground));
}

.brand:hover,
.brand:focus-visible {
  background: hsl(var(--brand-primary-light));
}

.brand small {
  color: hsl(var(--muted-foreground));
}

.sidebar-toggle {
  background: hsl(210 40% 98%);
  border-color: hsl(214 32% 91%);
  color: hsl(var(--muted-foreground));
}

.module-nav a {
  color: hsl(var(--foreground));
}

.module-nav a:hover,
.module-nav a:focus-visible {
  border-color: hsl(214 32% 91%);
  background: hsl(210 40% 98%);
  color: hsl(var(--foreground));
}

.module-nav a.active {
  color: hsl(var(--brand-primary));
}

.helpful-panel .button {
  text-decoration: none;
}

[data-icon="book-open"],
.icon-book-open {
  --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4 5.5A2.5 2.5 0 0 1 6.5 3H20v16H6.5A2.5 2.5 0 0 0 4 21.5v-16zM6.5 5A.5.5 0 0 0 6 5.5v12.55c.17-.03.33-.05.5-.05H18V5H6.5zM8 8h8v1.5H8zm0 3h8v1.5H8z'/%3E%3C/svg%3E");
}

/* monico light visual system override. Keep this after earlier redesign experiments. */
.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

body {
  background:
    radial-gradient(circle at 16% -10%, hsl(var(--brand-primary) / .18), transparent 28rem),
    radial-gradient(circle at 88% 4%, hsl(var(--brand-primary) / .10), transparent 24rem),
    linear-gradient(180deg, hsl(217 91% 98%) 0%, hsl(0 0% 100%) 34%, hsl(210 40% 98%) 100%);
  color: hsl(var(--foreground));
}

.sidebar {
  border-right-color: hsl(214 32% 91%);
  background: hsl(0 0% 100% / .97);
  box-shadow: 1px 0 0 hsl(214 32% 91% / .75);
}

.brand {
  min-height: 54px;
  color: hsl(var(--foreground));
  border-radius: var(--radius-lg);
}

.brand:hover,
.brand:focus-visible {
  background: hsl(var(--brand-primary-light));
}

.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: hsl(var(--foreground));
  color: hsl(var(--background));
  padding: 7px 5px;
}

.monico-m-mark,
.monico-wordmark {
  display: block;
  width: 100%;
  height: 100%;
  color: currentColor;
}

.brand-wordmark {
  width: 106px;
  height: auto;
  color: hsl(var(--foreground));
}

.brand small {
  margin-top: 2px;
  color: hsl(var(--muted-foreground));
  font-size: 12px;
  line-height: 16px;
}

.sidebar-toggle {
  background: hsl(210 40% 98%);
  border-color: hsl(214 32% 91%);
  color: hsl(var(--muted-foreground));
}

.module-nav a {
  color: hsl(var(--foreground));
  font-weight: 650;
}

.module-nav a:hover,
.module-nav a:focus-visible {
  border-color: hsl(214 32% 91%);
  background: hsl(210 40% 98%);
  color: hsl(var(--foreground));
}

.module-nav a.active {
  border-color: hsl(var(--status-analysis-border));
  background: hsl(var(--brand-primary-light));
  color: hsl(var(--brand-primary));
}

.content {
  background: transparent;
}

.home-view {
  max-width: 1180px;
  padding-top: 46px;
}

.home-brand {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 auto 28px;
  color: hsl(var(--foreground));
  text-align: center;
}

.home-wordmark {
  width: min(300px, 72vw);
  height: auto;
}

.home-brand small {
  color: hsl(var(--muted-foreground));
  font-size: 18px;
  font-weight: 500;
}

.home-search {
  border: 1px solid hsl(214 32% 91%);
  border-radius: 24px;
  background:
    linear-gradient(135deg, hsl(0 0% 100%) 0%, hsl(var(--brand-primary-light)) 100%);
  box-shadow: 0 24px 60px hsl(217 91% 51% / .12);
}

.home-search h1 {
  color: hsl(var(--foreground));
}

.home-search p {
  color: hsl(215 16% 40%);
}

.search-box,
.home-search > .button {
  box-shadow: 0 16px 34px hsl(217 91% 51% / .10);
}

.home-faq,
.module-overview {
  border: 1px solid hsl(214 32% 91%);
  border-radius: 24px;
  background: hsl(0 0% 100% / .92);
  box-shadow: 0 20px 50px hsl(217 91% 51% / .08);
}

.section-heading h2 {
  color: hsl(var(--foreground));
}

.section-heading p {
  color: hsl(var(--muted-foreground));
}

.overview-card,
.faq-mini details,
.module-card,
.faq-section {
  background: hsl(var(--card));
  border-color: hsl(214 32% 91%);
}

.overview-card:hover,
.overview-card:focus-visible {
  border-color: hsl(var(--status-analysis-border));
  background: hsl(217 91% 98%);
  box-shadow: 0 14px 30px hsl(217 91% 51% / .10);
}

.module-card {
  background: hsl(var(--card));
  border-color: hsl(214 32% 91%);
  box-shadow: 0 20px 50px hsl(217 91% 51% / .08);
}

.article-heading {
  border-radius: 18px;
  background:
    linear-gradient(135deg, hsl(0 0% 100%) 0%, hsl(var(--brand-primary-light)) 100%);
  border: 1px solid hsl(214 32% 91%);
  padding: 24px;
  margin-bottom: 22px;
}

.article-heading h3 {
  color: hsl(var(--foreground));
}

.article-heading p {
  color: hsl(215 16% 40%);
}

.article-heading .module-icon-wrap {
  background: hsl(var(--brand-primary));
  color: hsl(var(--primary-foreground));
  box-shadow: 0 12px 24px hsl(var(--brand-primary) / .22);
}

.guide-step,
.clarification-feature,
.proposal-feature,
.reports-guide-layout,
.proposal-intro-panel,
.recommendation-panel,
.security-panel,
.outcome-panel,
.detail-block {
  background: hsl(var(--card));
  border-color: hsl(214 32% 91%);
  box-shadow: var(--shadow-sm);
}

.clarification-copy,
.proposal-feature .clarification-copy,
.proposal-intro-panel,
.reports-decision-panel {
  background: hsl(217 91% 98%);
  border-color: hsl(214 32% 91%);
}

.helpful-panel {
  border-color: hsl(var(--status-analysis-border));
  background: hsl(var(--brand-primary-light));
}

.helpful-panel span,
.helpful-panel a {
  color: hsl(var(--foreground));
}

.helpful-panel .button.outline {
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  border-color: hsl(214 32% 86%);
}

.chat-launcher {
  border-color: hsl(var(--brand-primary));
  background: hsl(var(--brand-primary));
  color: hsl(var(--primary-foreground));
  box-shadow: 0 14px 30px hsl(var(--brand-primary) / .24);
}

[data-icon="ticket"],
.icon-ticket {
  --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v3a2 2 0 1 0 0 4v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-3a2 2 0 1 0 0-4V7zm5 .5V9h8V7.5H8zm0 3.75v1.5h8v-1.5H8zM8 15v1.5h5V15H8z'/%3E%3C/svg%3E");
}

[data-icon="clock"],
.icon-clock {
  --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm1 3h-2v6l5 3 .95-1.63L13 12.05V7z'/%3E%3C/svg%3E");
}

.empty-state {
  grid-column: 1 / -1;
  border: 1px dashed hsl(var(--border-hover));
  border-radius: var(--radius);
  padding: 28px;
  color: hsl(var(--muted-foreground));
  text-align: center;
}

[data-icon="arrow-left"],
.icon-arrow-left {
  --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.42-1.41L7.83 13H20v-2z'/%3E%3C/svg%3E");
}

[data-icon="layout-grid"],
.icon-layout-grid {
  --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4 4h7v7H4V4zm9 0h7v7h-7V4zM4 13h7v7H4v-7zm9 0h7v7h-7v-7z'/%3E%3C/svg%3E");
}

[data-icon="users"],
.icon-users {
  --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M16 11c1.66 0 2.99-1.57 2.99-3.5S17.66 4 16 4s-3 1.57-3 3.5S14.34 11 16 11zM8 11c1.66 0 2.99-1.57 2.99-3.5S9.66 4 8 4 5 5.57 5 7.5 6.34 11 8 11zm0 2c-2.33 0-7 1.17-7 3.5V20h14v-3.5C15 14.17 10.33 13 8 13zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.95 1.97 3.45V20h6v-3.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E");
}

[data-icon="file-text"],
.icon-file-text {
  --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zm0 1.5L18.5 8H14zM8 12h8v1.5H8zm0 3h8v1.5H8zm0-6h4v1.5H8z'/%3E%3C/svg%3E");
}

[data-icon="list"],
.icon-list {
  --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4 6.5h2V9H4zm4 0h12V9H8zM4 11h2v2.5H4zm4 0h12v2.5H8zM4 15.5h2V18H4zm4 0h12V18H8z'/%3E%3C/svg%3E");
}

[data-icon="clipboard"],
.icon-clipboard {
  --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M16 3h-2.18C13.4 1.84 12.3 1 11 1S8.6 1.84 8.18 3H6a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zM11 2.75a1 1 0 1 1 0 2 1 1 0 0 1 0-2zM16 20H6V5h2v2h6V5h2z'/%3E%3C/svg%3E");
}

[data-icon="message-circle-question"],
.icon-message-circle-question {
  --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 2a9 9 0 0 0-7.45 14.06L3 22l5.94-1.55A9 9 0 1 0 12 2zm0 16a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm1-4h-2c0-2 2-2.25 2-3.5 0-.83-.67-1.5-1.5-1.5S10 9.67 10 10.5H8A3.5 3.5 0 1 1 14.37 12c-.44.67-1.37 1.06-1.37 2z'/%3E%3C/svg%3E");
}

[data-icon="sparkles"],
.icon-sparkles {
  --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='m12 2 1.7 5.3L19 9l-5.3 1.7L12 16l-1.7-5.3L5 9l5.3-1.7L12 2zm6 11 1 3 3 1-3 1-1 3-1-3-3-1 3-1 1-3zM5 14l.8 2.2L8 17l-2.2.8L5 20l-.8-2.2L2 17l2.2-.8L5 14z'/%3E%3C/svg%3E");
}

[data-icon="search"],
.icon-search {
  --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='m21 20-5.8-5.8A7 7 0 1 0 14 15.2L20 21l1-1zM5 10a5 5 0 1 1 10 0A5 5 0 0 1 5 10z'/%3E%3C/svg%3E");
}

[data-icon="x"],
.icon-x {
  --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='m18.3 5.7-1.4-1.4L12 9.2 7.1 4.3 5.7 5.7l4.9 4.9-4.9 4.9 1.4 1.4 4.9-4.9 4.9 4.9 1.4-1.4-4.9-4.9 4.9-4.9z'/%3E%3C/svg%3E");
}

[data-icon="thumbs-up"],
.icon-thumbs-up {
  --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M2 21h4V9H2v12zm20-10c0-1.1-.9-2-2-2h-6.3l1-4.6.03-.32c0-.41-.17-.79-.44-1.06L13.2 2 6.6 8.6c-.37.36-.6.86-.6 1.4v8c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73z'/%3E%3C/svg%3E");
}

[data-icon="thumbs-down"],
.icon-thumbs-down {
  --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M22 3h-4v12h4V3zM2 13c0 1.1.9 2 2 2h6.3l-1 4.6-.03.32c0 .41.17.79.44 1.06L10.8 22l6.6-6.6c.37-.36.6-.86.6-1.4V6c0-1.1-.9-2-2-2H7c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73z'/%3E%3C/svg%3E");
}

[data-icon="send"],
.icon-send {
  --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M2 21 23 12 2 3v7l15 2-15 2v7z'/%3E%3C/svg%3E");
}

[data-icon="panel-left"],
.icon-panel-left {
  --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zm0 2v12h5V6H4zm7 0v12h9V6h-9z'/%3E%3C/svg%3E");
}

.language-switch {
  position: fixed;
  top: 18px;
  right: 28px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  background: hsl(0 0% 100% / .86);
  box-shadow: 0 10px 28px hsl(217 91% 51% / .10);
  color: hsl(var(--muted-foreground));
  padding: 0 12px;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(10px);
}

.language-switch [data-language-option] {
  color: hsl(var(--muted-foreground));
  transition: color .18s ease, font-weight .18s ease;
}

.language-switch [data-language-option].is-active {
  color: hsl(var(--brand-primary));
  font-weight: 800;
}

.language-switch:hover,
.language-switch:focus-visible {
  outline: none;
  background: hsl(0 0% 100%);
  box-shadow: 0 0 0 4px hsl(var(--brand-primary) / .12), 0 12px 30px hsl(217 91% 51% / .12);
}

.language-divider {
  color: hsl(215 16% 55%);
}

@media (max-width: 760px) {
  .language-switch {
    top: 12px;
    right: 14px;
    font-size: 14px;
  }
}

@keyframes workflowStatusFrame1 {
  0%, 38% { opacity: 1; }
  48%, 100% { opacity: 0; }
}

@keyframes workflowStatusFrame2 {
  0%, 42% { opacity: 0; }
  52%, 100% { opacity: 1; }
}

@keyframes workflowStatusAttention1 {
  0%, 6% { opacity: 0; transform: scale(.98); }
  10%, 31% { opacity: 1; transform: scale(1); }
  38%, 100% { opacity: 0; transform: scale(1.02); }
}

@keyframes workflowStatusAttention2 {
  0%, 48% { opacity: 0; transform: scale(.98); }
  56%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes workflowStatusCursor {
  0% { left: 20%; top: 24%; opacity: 0; transform: scale(.96); }
  12% { opacity: 1; }
  20%, 30% { left: calc(14.2% - 7px); top: calc(14.8% - 6px); opacity: 1; transform: scale(1); }
  34% { left: calc(14.2% - 7px); top: calc(14.8% - 6px); opacity: 1; transform: scale(.86); }
  42%, 100% { left: calc(14.2% - 7px); top: calc(14.8% - 6px); opacity: 0; transform: scale(1); }
}

@keyframes workflowStatusRing {
  0%, 25% { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
  32% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  42%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.45); }
}

@keyframes workflowNotesFrame1 {
  0%, 36% { opacity: 1; }
  45%, 100% { opacity: 0; }
}

@keyframes workflowNotesFrame2 {
  0%, 40% { opacity: 0; }
  48%, 70% { opacity: 1; }
  78%, 100% { opacity: 0; }
}

@keyframes workflowNotesFrame3 {
  0%, 74% { opacity: 0; }
  82%, 100% { opacity: 1; }
}

@keyframes workflowNotesAttention {
  0%, 8% { opacity: 0; transform: scale(.99); }
  14%, 34% { opacity: 1; transform: scale(1); }
  43%, 100% { opacity: 0; transform: scale(1.01); }
}

@keyframes workflowNotesCursor {
  0%, 48% { left: 44%; top: 88%; opacity: 0; transform: scale(.96); }
  54% { opacity: 1; }
  60%, 66% { left: calc(48.5% - 7px); top: calc(90.6% - 6px); opacity: 1; transform: scale(1); }
  70% { left: calc(48.5% - 7px); top: calc(90.6% - 6px); opacity: 1; transform: scale(.86); }
  76%, 100% { left: calc(48.5% - 7px); top: calc(90.6% - 6px); opacity: 0; transform: scale(1); }
}

@keyframes workflowNotesRing {
  0%, 63% { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
  70% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  80%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.45); }
}

@keyframes workflowTasksFrame1 {
  0%, 24% { opacity: 1; }
  32%, 100% { opacity: 0; }
}

@keyframes workflowTasksFrame2 {
  0%, 28% { opacity: 0; }
  36%, 58% { opacity: 1; }
  66%, 100% { opacity: 0; }
}

@keyframes workflowTasksFrame3 {
  0%, 62% { opacity: 0; }
  70%, 82% { opacity: 1; }
  88%, 100% { opacity: 0; }
}

@keyframes workflowTasksFrame4 {
  0%, 84% { opacity: 0; }
  92%, 100% { opacity: 1; }
}

@keyframes workflowTasksAttention1 {
  0%, 6% { opacity: 0; transform: scale(.99); }
  12%, 22% { opacity: 1; transform: scale(1); }
  30%, 100% { opacity: 0; transform: scale(1.01); }
}

@keyframes workflowTasksAttention2 {
  0%, 38% { opacity: 0; transform: scale(.99); }
  44%, 56% { opacity: 1; transform: scale(1); }
  64%, 100% { opacity: 0; transform: scale(1.01); }
}

@keyframes workflowTasksCursor {
  0%, 44% { left: 58%; top: 94%; opacity: 0; transform: scale(.96); }
  50% { opacity: 1; }
  54%, 58% { left: calc(64.3% - 7px); top: calc(96.2% - 6px); opacity: 1; transform: scale(1); }
  61% { left: calc(64.3% - 7px); top: calc(96.2% - 6px); opacity: 1; transform: scale(.86); }
  66%, 72% { left: calc(64.3% - 7px); top: calc(96.2% - 6px); opacity: 0; transform: scale(1); }
  76%, 80% { left: calc(95.7% - 7px); top: calc(90.7% - 6px); opacity: 1; transform: scale(1); }
  83% { left: calc(95.7% - 7px); top: calc(90.7% - 6px); opacity: 1; transform: scale(.86); }
  90%, 100% { left: calc(95.7% - 7px); top: calc(90.7% - 6px); opacity: 0; transform: scale(1); }
}

@keyframes workflowTasksRing1 {
  0%, 55% { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
  61% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  68%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.45); }
}

@keyframes workflowTasksRing2 {
  0%, 78% { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
  84% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  92%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.45); }
}

@keyframes workflowNotificationsFrame1 {
  0%, 18% { opacity: 1; }
  24%, 100% { opacity: 0; }
}

@keyframes workflowNotificationsFrame2 {
  0%, 20% { opacity: 0; }
  27%, 74% { opacity: 1; }
  80%, 100% { opacity: 0; }
}

@keyframes workflowNotificationsFrame3 {
  0%, 74% { opacity: 0; }
  80%, 91% { opacity: 1; }
  94%, 100% { opacity: 0; }
}

@keyframes workflowNotificationsFrame4 {
  0%, 91% { opacity: 0; }
  92.5%, 100% { opacity: 1; }
}

@keyframes workflowNotificationsBellAttention {
  0%, 4% { opacity: 0; transform: scale(.9); }
  8%, 13% { opacity: 1; transform: scale(1); }
  18%, 100% { opacity: 0; transform: scale(1.05); }
}

@keyframes workflowNotificationsListAttention {
  0%, 29% { opacity: 0; transform: scale(.995); }
  34%, 43% { opacity: 1; transform: scale(1); }
  49%, 100% { opacity: 0; transform: scale(1.006); }
}

@keyframes workflowNotificationsArrow {
  0%, 45% { opacity: 0; transform: translateX(-14px); }
  49%, 53% { opacity: 1; transform: translateX(0); }
  57%, 100% { opacity: 0; transform: translateX(10px); }
}

@keyframes workflowNotificationsUnderline {
  0%, 80% { opacity: 0; transform: scaleX(.6); }
  83%, 87% { opacity: 1; transform: scaleX(1); }
  90%, 100% { opacity: 0; transform: scaleX(1); }
}

@keyframes workflowNotificationsTaskAttention {
  0%, 82% { opacity: 0; transform: scale(.995); }
  86%, 87% { opacity: 1; transform: scale(1); }
  90%, 100% { opacity: 0; transform: scale(1.006); }
}

@keyframes workflowNotificationsCursor {
  0%, 10% { left: 6%; top: 86%; opacity: 0; transform: scale(.96); }
  13% { opacity: 1; }
  15%, 18% { left: calc(1.45% - 7px); top: calc(92.5% - 6px); opacity: 1; transform: scale(1); }
  20% { left: calc(1.45% - 7px); top: calc(92.5% - 6px); opacity: 1; transform: scale(.86); }
  25%, 56% { left: calc(1.45% - 7px); top: calc(92.5% - 6px); opacity: 0; transform: scale(1); }
  59%, 62% { left: calc(71.3% - 7px); top: calc(45.3% - 6px); opacity: 1; transform: scale(1); }
  64% { left: calc(71.3% - 7px); top: calc(45.3% - 6px); opacity: 1; transform: scale(.86); }
  67%, 70% { left: calc(78% - 7px); top: calc(45.3% - 6px); opacity: 1; transform: scale(1); }
  72% { left: calc(78% - 7px); top: calc(45.3% - 6px); opacity: 1; transform: scale(.86); }
  75%, 90% { left: calc(78% - 7px); top: calc(45.3% - 6px); opacity: 0; transform: scale(1); }
  91%, 91.8% { left: calc(63.5% - 7px); top: calc(51.1% - 6px); opacity: 1; transform: scale(1); }
  92.2% { left: calc(63.5% - 7px); top: calc(51.1% - 6px); opacity: 1; transform: scale(.86); }
  94%, 100% { left: calc(63.5% - 7px); top: calc(51.1% - 6px); opacity: 0; transform: scale(1); }
}

@keyframes workflowNotificationsRingBell {
  0%, 16% { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  25%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.45); }
}

@keyframes workflowNotificationsRingFilter1 {
  0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
}

@keyframes workflowNotificationsRingFilter2 {
  0%, 60% { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
  64% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  68%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.45); }
}

@keyframes workflowNotificationsRingFilter3 {
  0%, 68% { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
  72% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  76%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.45); }
}

@keyframes workflowNotificationsRingComplete {
  0%, 91.7% { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
  92.4% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  94%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.45); }
}

@keyframes technicalFrame1 {
  0%, 22% { opacity: 1; }
  28%, 100% { opacity: 0; }
}

@keyframes technicalFrame2 {
  0%, 24% { opacity: 0; }
  30%, 42% { opacity: 1; }
  48%, 100% { opacity: 0; }
}

@keyframes technicalFrame3 {
  0%, 44% { opacity: 0; }
  50%, 74% { opacity: 1; }
  80%, 100% { opacity: 0; }
}

@keyframes technicalFrame4 {
  0%, 76% { opacity: 0; }
  82%, 100% { opacity: 1; }
}

@keyframes technicalAttentionAdd {
  0%, 5% { opacity: 0; transform: scale(.99); }
  9%, 17% { opacity: 1; transform: scale(1); }
  22%, 100% { opacity: 0; transform: scale(1.01); }
}

@keyframes technicalAttentionPaperclips {
  0%, 51% { opacity: 0; transform: scale(.92); }
  55%, 70% { opacity: 1; transform: scale(1); }
  76%, 100% { opacity: 0; transform: scale(1.06); }
}

@keyframes technicalCursor {
  0%, 14% { left: 44%; top: 88%; opacity: 0; transform: scale(.96); }
  18%, 21% { left: calc(51.2% - 8px); top: calc(89.6% - 7px); opacity: 1; transform: scale(1); }
  23% { left: calc(51.2% - 8px); top: calc(89.6% - 7px); opacity: 1; transform: scale(.86); }
  27%, 34% { left: calc(51.2% - 8px); top: calc(89.6% - 7px); opacity: 0; transform: scale(1); }
  36%, 39% { left: calc(75.8% - 8px); top: calc(87.8% - 7px); opacity: 1; transform: scale(1); }
  41% { left: calc(75.8% - 8px); top: calc(87.8% - 7px); opacity: 1; transform: scale(.86); }
  45%, 59% { left: calc(75.8% - 8px); top: calc(87.8% - 7px); opacity: 0; transform: scale(1); }
  61%, 64% { left: calc(32.6% - 8px); top: calc(70.2% - 7px); opacity: 1; transform: scale(1); }
  66% { left: calc(32.6% - 8px); top: calc(70.2% - 7px); opacity: 1; transform: scale(.86); }
  68%, 71% { left: calc(64.2% - 8px); top: calc(70.2% - 7px); opacity: 1; transform: scale(1); }
  73% { left: calc(64.2% - 8px); top: calc(70.2% - 7px); opacity: 1; transform: scale(.86); }
  77%, 84% { left: calc(64.2% - 8px); top: calc(70.2% - 7px); opacity: 0; transform: scale(1); }
  86%, 90% { left: calc(51.5% - 8px); top: calc(77.8% - 7px); opacity: 1; transform: scale(1); }
  92% { left: calc(51.5% - 8px); top: calc(77.8% - 7px); opacity: 1; transform: scale(.86); }
  96%, 100% { left: calc(51.5% - 8px); top: calc(77.8% - 7px); opacity: 0; transform: scale(1); }
}

@keyframes technicalRingAdd {
  0%, 19% { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
  23% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  30%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.45); }
}

@keyframes technicalRingSave {
  0%, 37% { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
  41% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  48%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.45); }
}

@keyframes technicalRingRequirements {
  0%, 62% { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
  66% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  72%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.45); }
}

@keyframes technicalRingCatalogs {
  0%, 69% { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
  73% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  79%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.45); }
}

@keyframes technicalRingAnalyze {
  0%, 89% { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
  92% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  98%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.45); }
}

@keyframes technicalExtractionFrame1 {
  0%, 74% { opacity: 1; }
  82%, 100% { opacity: 0; }
}

@keyframes technicalExtractionFrame2 {
  0%, 78% { opacity: 0; }
  86%, 100% { opacity: 1; }
}

@keyframes technicalExtractionAttentionRequirements {
  0%, 8% { opacity: 0; transform: scale(.99); }
  14%, 30% { opacity: 1; transform: scale(1); }
  38%, 100% { opacity: 0; transform: scale(1.01); }
}

@keyframes technicalExtractionAttentionFeedback {
  0%, 42% { opacity: 0; transform: scale(.99); }
  48%, 62% { opacity: 1; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1.01); }
}

@keyframes technicalExtractionCursor {
  0%, 67% { left: 69%; top: 82%; opacity: 0; transform: scale(.96); }
  72%, 76% { left: calc(75.2% - 8px); top: calc(83.1% - 7px); opacity: 1; transform: scale(1); }
  78% { left: calc(75.2% - 8px); top: calc(83.1% - 7px); opacity: 1; transform: scale(.86); }
  84%, 100% { left: calc(75.2% - 8px); top: calc(83.1% - 7px); opacity: 0; transform: scale(1); }
}

@keyframes technicalExtractionRingConfirm {
  0%, 75% { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
  78% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  84%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.45); }
}

@keyframes technicalReviewFrame1 {
  0%, 19% { opacity: 1; }
  25%, 100% { opacity: 0; }
}

@keyframes technicalReviewFrame2 {
  0%, 22% { opacity: 0; }
  28%, 44% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes technicalReviewFrame3 {
  0%, 47% { opacity: 0; }
  53%, 77% { opacity: 1; }
  83%, 100% { opacity: 0; }
}

@keyframes technicalReviewFrame4 {
  0%, 80% { opacity: 0; }
  86%, 100% { opacity: 1; }
}

@keyframes technicalReviewAttentionObservations {
  0%, 4% { opacity: 0; transform: scale(.99); }
  8%, 18% { opacity: 1; transform: scale(1); }
  23%, 100% { opacity: 0; transform: scale(1.01); }
}

@keyframes technicalReviewAttentionReference {
  0%, 55% { opacity: 0; transform: scale(.99); }
  60%, 69% { opacity: 1; transform: scale(1); }
  74%, 100% { opacity: 0; transform: scale(1.01); }
}

@keyframes technicalReviewCursor {
  0%, 31% { left: 22%; top: 54.8%; opacity: 0; transform: scale(.98); }
  35%, 39% { left: calc(22% - 8px); top: calc(54.8% - 8px); opacity: 1; transform: scale(1); }
  41% { left: calc(22% - 8px); top: calc(54.8% - 8px); opacity: 1; transform: scale(.86); }
  45%, 71% { left: calc(22% - 8px); top: calc(54.8% - 8px); opacity: 0; transform: scale(1); }
  75%, 79% { left: calc(56.1% - 8px); top: calc(41.5% - 8px); opacity: 1; transform: scale(1); }
  81% { left: calc(56.1% - 8px); top: calc(41.5% - 8px); opacity: 1; transform: scale(.86); }
  86%, 100% { left: calc(56.1% - 8px); top: calc(41.5% - 8px); opacity: 0; transform: scale(1); }
}

@keyframes technicalReviewRingExpand {
  0%, 38% { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
  41% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  47%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.45); }
}

@keyframes technicalReviewRingReview {
  0%, 78% { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
  81% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  87%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.45); }
}

@media (max-width: 1100px) {
  .module-grid,
  .section-grid,
  .visual-grid,
  .reports-guide-layout {
    grid-template-columns: 1fr;
  }

  .overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .support-actions {
    grid-template-columns: 1fr;
  }

  .faq-mini {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .clarification-feature {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid hsl(var(--border));
  }

  .module-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .content {
    padding-inline: 16px;
  }

  .home-view {
    padding-top: 32px;
  }

  .guide-step > .visual-card,
  .guide-step > .micro-demo {
    margin-left: 0;
  }

  .article-heading h3 {
    font-size: 26px;
    line-height: 32px;
  }
}

@media (max-width: 620px) {
  .module-nav,
  .overview-grid {
    grid-template-columns: 1fr;
  }

  .home-search {
    align-items: stretch;
    grid-template-columns: 1fr;
    padding: 24px;
  }

  .home-search h1 {
    font-size: 30px;
    line-height: 36px;
  }

  .search-results-header,
  .search-result {
    grid-template-columns: 1fr;
  }

  .search-results-header {
    align-items: flex-start;
  }

  .search-result-type {
    grid-row: auto;
    width: fit-content;
  }

  .home-brand strong {
    font-size: 26px;
    line-height: 32px;
  }

  .home-brand small {
    font-size: 16px;
  }

  .home-mark {
    width: 58px;
    height: 58px;
    font-size: 44px;
  }

  .chat-panel {
    right: 14px;
    bottom: 76px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .micro-demo-image,
  .second-frame,
  .third-frame,
  .demo-cursor,
  .demo-click-ring,
  .date-frame,
  .date-demo-cursor,
  .date-demo-ring,
  .wrong-day,
  .wrong-day::after,
  .input-caret,
  .citation-jump-frame,
  .citation-jump-cursor,
  .citation-jump-ring,
  .highlighted-source,
  .reports-status-frame,
  .reports-status-cursor,
  .reports-status-ring,
  .reports-review-focus,
  .reports-demo-screen,
  .qna-detail-frame,
  .qna-detail-cursor,
  .qna-detail-ring,
  .qna-reference-frame,
  .qna-reference-cursor,
  .qna-reference-ring,
  .qna-draft-frame,
  .qna-draft-cursor,
  .qna-draft-ring,
  .qna-draft-attention,
  .qna-competitive-frame,
  .qna-competitive-cursor,
  .qna-competitive-ring,
  .qna-competitive-attention,
  .proposal-filter-frame,
  .proposal-filter-cursor,
  .proposal-filter-ring,
  .proposal-assign-frame,
  .proposal-assign-cursor,
  .proposal-assign-ring,
  .proposal-upload-frame,
  .proposal-upload-cursor,
  .proposal-upload-ring,
  .proposal-upload-attention,
  .workflow-frame,
  .workflow-cursor,
  .workflow-ring,
  .workflow-attention,
  .workflow-arrow,
  .workflow-underline,
  .technical-frame,
  .technical-cursor,
  .technical-ring,
  .technical-attention,
  .technical-extraction-frame,
  .technical-extraction-cursor,
  .technical-extraction-ring,
  .technical-extraction-attention,
  .technical-review-frame,
  .technical-review-cursor,
  .technical-review-ring,
  .technical-review-attention {
    animation: none;
  }

  .two-step-demo .micro-demo-image,
  .draft-flow-demo .micro-demo-image {
    opacity: 0;
  }

  .two-step-demo .second-frame {
    opacity: 1;
  }

  .draft-flow-demo .second-frame {
    opacity: 0;
  }

  .draft-flow-demo .third-frame {
    opacity: 1;
  }

  .demo-cursor {
    left: var(--target-x);
    top: var(--target-y);
    opacity: 1;
  }

  .demo-click-ring {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  .date-frame {
    opacity: 0;
  }

  .date-frame-5 {
    opacity: 1;
  }

  .date-demo-cursor {
    left: 57px;
    top: 165px;
    opacity: 1;
  }

  .citation-jump-frame {
    opacity: 0;
  }

  .citation-jump-frame-2 {
    opacity: 1;
  }

  .reports-status-frame {
    opacity: 0;
  }

  .reports-status-frame-4 {
    opacity: 1;
  }

  .reports-review-focus {
    opacity: 1;
  }

  .qna-detail-frame {
    opacity: 0;
  }

  .qna-detail-frame-3 {
    opacity: 1;
  }

  .qna-reference-frame {
    opacity: 0;
  }

  .qna-reference-frame-3 {
    opacity: 1;
  }

  .qna-draft-frame {
    opacity: 0;
  }

  .qna-draft-frame-3,
  .qna-draft-attention-final {
    opacity: 1;
  }

  .qna-competitive-frame {
    opacity: 0;
  }

  .qna-competitive-frame-3 {
    opacity: 1;
  }

  .proposal-filter-frame {
    opacity: 0;
  }

  .proposal-filter-frame-3 {
    opacity: 1;
  }

  .proposal-assign-frame {
    opacity: 0;
  }

  .proposal-assign-frame-4 {
    opacity: 1;
  }

  .proposal-upload-frame {
    opacity: 0;
  }

  .proposal-upload-frame-5 {
    opacity: 1;
  }

  .technical-frame {
    opacity: 0;
  }

  .technical-frame-4 {
    opacity: 1;
  }

  .technical-extraction-frame {
    opacity: 0;
  }

  .technical-extraction-frame-2 {
    opacity: 1;
  }

  .technical-review-frame {
    opacity: 0;
  }

  .technical-review-frame-4 {
    opacity: 1;
  }
}