@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/_kit/assets/fonts/inter-latin.woff2") format("woff2");
}

html, body { margin: 0; height: 100%; background: var(--wc-color-surface); }
*, *::before, *::after { box-sizing: border-box; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }

.wc-root {
  position: fixed; inset: 0; overflow: hidden;
  background: var(--wc-color-surface); color: var(--wc-color-text);
  font-family: var(--wc-font-family); font-size: var(--wc-font-size-m);
  font-weight: var(--wc-font-weight-regular); line-height: var(--wc-line-height-base);
}

/* type roles */
.wc-caption { font-size: var(--wc-font-size-xs); font-weight: var(--wc-font-weight-regular); line-height: var(--wc-line-height-base); }
.wc-label { font-size: var(--wc-font-size-s); font-weight: var(--wc-font-weight-bold); line-height: var(--wc-line-height-tight); }
.wc-body { font-size: var(--wc-font-size-m); font-weight: var(--wc-font-weight-regular); line-height: var(--wc-line-height-base); }
.wc-row-text { font-size: var(--wc-font-size-m); font-weight: var(--wc-font-weight-regular); line-height: var(--wc-line-height-tight); }
.wc-title-text { font-size: var(--wc-font-size-l); font-weight: var(--wc-font-weight-bold); line-height: var(--wc-line-height-tight); }
.wc-display { font-size: var(--wc-font-size-xl); font-weight: var(--wc-font-weight-bold); line-height: var(--wc-line-height-tight); }
.wc-muted { color: var(--wc-color-text-muted); }

/* frame bar */
.wc-bar {
  position: absolute; top: 0; left: 0; right: 0;
  height: calc(env(safe-area-inset-top, 0px) + var(--wc-frame-bar-height));
  background: var(--wc-color-surface); border-bottom: 1px solid var(--wc-color-line);
}
.wc-bar-title {
  position: absolute; left: calc(env(safe-area-inset-left, 0px) + 60px); right: 16px;
  top: env(safe-area-inset-top, 0px); height: var(--wc-frame-bar-height);
  display: flex; align-items: center;
  font-size: var(--wc-font-size-m); font-weight: var(--wc-font-weight-bold); line-height: var(--wc-line-height-tight);
}
.wc-bar-title > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* anchor */
.wc-anchor {
  position: absolute; z-index: 40;
  width: var(--wc-anchor-hit); height: var(--wc-anchor-hit);
  left: calc(max(16px, env(safe-area-inset-left, 0px) + 16px) - 6px);
  display: flex; align-items: center; justify-content: center;
}
.wc-root[data-mode="standard"] .wc-anchor { top: calc(env(safe-area-inset-top, 0px) + (var(--wc-frame-bar-height) - var(--wc-anchor-hit)) / 2); }
.wc-root[data-mode="compact"] .wc-anchor { top: calc(env(safe-area-inset-top, 0px) + var(--wc-space-2) - 6px); }
.wc-pill {
  width: 32px; height: 32px; padding: var(--wc-space-1); border-radius: var(--wc-radius-full);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.wc-pill img { width: var(--wc-anchor-size); height: var(--wc-anchor-size); display: block; border-radius: var(--wc-radius-full); }
.wc-root[data-mode="compact"] .wc-pill {
  background: color-mix(in srgb, var(--wc-color-surface-raised) 88%, transparent);
  border: 1px solid var(--wc-color-line);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}

/* experience area */
.wc-area { position: absolute; left: 0; right: 0; bottom: env(safe-area-inset-bottom, 0px); }
.wc-root[data-mode="standard"] .wc-area { top: calc(env(safe-area-inset-top, 0px) + var(--wc-frame-bar-height)); }
.wc-root[data-mode="compact"] .wc-area { top: env(safe-area-inset-top, 0px); }
.wc-card { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow-x: hidden; overflow-y: auto; }
.wc-root[data-mode="compact"] .wc-card { top: calc(var(--wc-space-2) + 32px + var(--wc-space-5)); }
.wc-root.wc-has-hud .wc-card { bottom: calc(var(--wc-space-2) + 40px); }
.wc-card[hidden] { display: none; }
.wc-error { padding: var(--wc-space-4); color: var(--wc-color-negative); }

/* loading */
.wc-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--wc-space-3); }
.wc-ring { width: 24px; height: 24px; border-radius: var(--wc-radius-full); border: 3px solid var(--wc-color-line); border-top-color: var(--wc-color-accent); animation: wc-spin 1000ms linear infinite; }
@keyframes wc-spin { to { transform: rotate(360deg); } }

/* sheet */
.wc-scrim { position: fixed; inset: 0; z-index: 20; background: var(--wc-color-scrim); animation: wc-fade var(--wc-motion-base) var(--wc-motion-ease); }
.wc-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: var(--wc-color-surface-raised);
  border-top-left-radius: var(--wc-radius-l); border-top-right-radius: var(--wc-radius-l);
  padding: var(--wc-space-5) var(--wc-space-4) calc(env(safe-area-inset-bottom, 0px) + var(--wc-space-4));
  animation: wc-slide var(--wc-motion-base) var(--wc-motion-ease);
}
.wc-handle-zone { position: absolute; top: 0; left: 0; right: 0; height: 28px; touch-action: none; cursor: grab; }
.wc-handle { position: absolute; top: 8px; left: 50%; width: 36px; height: 4px; transform: translateX(-50%); border-radius: var(--wc-radius-full); background: var(--wc-color-line); }
.wc-sheet-row {
  display: flex; align-items: center; width: 100%; height: 52px; text-align: left;
  font-size: var(--wc-font-size-m); font-weight: var(--wc-font-weight-regular); line-height: var(--wc-line-height-tight);
  border-top: 1px solid var(--wc-color-line);
  transition: background var(--wc-motion-fast);
}
.wc-sheet-row:first-of-type { border-top: 0; }
.wc-sheet-row:active { background: var(--wc-color-line); }
.wc-sheet-row .wc-row-label { flex: 1; min-width: 0; }
.wc-sheet-row .wc-row-caption { color: var(--wc-color-text-muted); font-size: var(--wc-font-size-xs); font-weight: var(--wc-font-weight-regular); line-height: var(--wc-line-height-base); margin-right: var(--wc-space-2); }
.wc-sheet-row.wc-accent { color: var(--wc-color-accent); font-weight: var(--wc-font-weight-bold); }
.wc-chevron { width: 16px; height: 16px; color: var(--wc-color-text-muted); flex: none; }
@keyframes wc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wc-slide { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes wc-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* panels */
.wc-panel { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow-y: auto; }
.wc-howto { padding: var(--wc-space-4); }
.wc-howto h1, .wc-howto h2, .wc-howto h3 { margin: var(--wc-space-4) 0 var(--wc-space-2); font-size: var(--wc-font-size-l); font-weight: var(--wc-font-weight-bold); line-height: var(--wc-line-height-tight); }
.wc-howto h1:first-child, .wc-howto h2:first-child, .wc-howto h3:first-child { margin-top: 0; }
.wc-howto p, .wc-howto ul, .wc-howto ol { margin: 0 0 var(--wc-space-3); }
.wc-howto ul, .wc-howto ol { padding-left: var(--wc-space-5); }
.wc-howto code { background: var(--wc-container-bg); padding: 0 var(--wc-space-1); border-radius: var(--wc-radius-s); }
.wc-portfolio-row { display: flex; align-items: center; width: 100%; height: 64px; padding: 0 var(--wc-space-4); text-align: left; border-bottom: 1px solid var(--wc-color-line); }
.wc-portfolio-row:active { background: var(--wc-color-line); }
.wc-tile { width: 40px; height: 40px; border-radius: var(--wc-radius-s); background: linear-gradient(135deg, var(--wc-color-team), var(--wc-color-surface-raised)); flex: none; }
.wc-portfolio-row .wc-row-label { flex: 1; min-width: 0; margin-left: var(--wc-space-3); font-size: var(--wc-font-size-m); font-weight: var(--wc-font-weight-bold); line-height: var(--wc-line-height-tight); }

/* templates */
.wc-tpl { display: flex; flex-direction: column; min-height: 100%; padding: 0 var(--wc-space-4); }
.wc-hero { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--wc-radius-l); background: linear-gradient(135deg, var(--wc-color-team), var(--wc-color-surface-raised)); overflow: hidden; margin-top: var(--wc-space-5); flex: none; }
.wc-root[data-mode="compact"] .wc-hero { margin-top: 0; }
.wc-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wc-welcome-title { margin: var(--wc-space-5) 0 0; }
.wc-welcome-body { margin: var(--wc-space-2) 0 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wc-actions { margin-top: auto; padding-top: var(--wc-space-4); padding-bottom: var(--wc-space-4); display: flex; flex-direction: column; align-items: stretch; gap: var(--wc-space-3); }
.wc-btn-primary {
  height: 52px; width: 100%; border-radius: var(--wc-radius-full);
  background: var(--wc-color-accent); color: var(--wc-color-on-accent);
  font-size: var(--wc-font-size-m); font-weight: var(--wc-font-weight-bold); line-height: var(--wc-line-height-tight);
}
.wc-btn-primary[aria-disabled="true"] { opacity: var(--wc-anchor-dim-opacity); cursor: default; }
.wc-btn-text { min-height: var(--wc-anchor-hit); color: var(--wc-color-accent); font-size: var(--wc-font-size-s); font-weight: var(--wc-font-weight-bold); line-height: var(--wc-line-height-tight); }
.wc-idle-caption { text-align: center; color: var(--wc-color-text-muted); font-size: var(--wc-font-size-s); font-weight: var(--wc-font-weight-regular); line-height: var(--wc-line-height-base); padding: var(--wc-space-3) 0; }
.wc-recap-head { margin: var(--wc-space-5) 0 0; text-align: center; }
.wc-recap-sub { margin: var(--wc-space-2) 0 0; text-align: center; color: var(--wc-color-text-muted); }
.wc-stat-card { margin-top: var(--wc-space-5); background: var(--wc-color-surface-raised); border-radius: var(--wc-radius-l); padding: var(--wc-space-4); }
.wc-stat-row { display: flex; align-items: center; justify-content: space-between; height: 48px; border-top: 1px solid var(--wc-color-line); }
.wc-stat-row:first-child { border-top: 0; }
.wc-stat-row .wc-stat-label { font-size: var(--wc-font-size-m); font-weight: var(--wc-font-weight-regular); line-height: var(--wc-line-height-tight); }
.wc-stat-row .wc-stat-value { font-size: var(--wc-font-size-l); font-weight: var(--wc-font-weight-bold); line-height: var(--wc-line-height-tight); }

/* toast */
.wc-toast {
  position: fixed; left: 16px; right: 16px; z-index: 50; pointer-events: none;
  display: flex; align-items: center; gap: var(--wc-space-2); min-height: 48px;
  padding: var(--wc-space-3) var(--wc-space-4); border-radius: var(--wc-radius-m);
  background: var(--wc-color-surface-raised); border: 1px solid var(--wc-color-line); box-shadow: var(--wc-shadow-raised);
  font-size: var(--wc-font-size-s); font-weight: var(--wc-font-weight-bold); line-height: var(--wc-line-height-tight);
  animation: wc-toast 2950ms var(--wc-motion-ease) forwards;
}
.wc-root[data-mode="standard"] .wc-toast { top: calc(env(safe-area-inset-top, 0px) + var(--wc-frame-bar-height) + var(--wc-space-2)); }
.wc-root[data-mode="compact"] .wc-toast { top: calc(env(safe-area-inset-top, 0px) + 48px); }
.wc-toast-icon { width: 20px; height: 20px; flex: none; }
.wc-toast[data-tone="positive"] .wc-toast-icon { color: var(--wc-color-positive); }
.wc-toast[data-tone="negative"] .wc-toast-icon { color: var(--wc-color-negative); }
.wc-toast[data-tone="neutral"] .wc-toast-icon { color: var(--wc-color-text-muted); }
.wc-toast-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@keyframes wc-toast {
  0% { opacity: 0; transform: translateY(-8px); }
  10% { opacity: 1; transform: translateY(0); }
  95% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
}

/* celebration */
.wc-celebrate {
  position: fixed; inset: 0; z-index: 45; pointer-events: none;
  background: radial-gradient(ellipse 100% 70% at 50% 0%, color-mix(in srgb, var(--wc-color-positive) 24%, transparent), transparent 70%);
  animation: wc-celebrate 900ms linear forwards;
}
@keyframes wc-celebrate { 0% { opacity: 0; } 16.7% { opacity: 1; } 33.3% { opacity: 1; } 100% { opacity: 0; } }

/* containers: lockup */
.wc-lockup { display: inline-flex; align-items: center; gap: var(--wc-space-2); min-width: 0; }
.wc-lockup-label { color: var(--wc-container-label); font-size: var(--wc-font-size-xs); font-weight: var(--wc-font-weight-regular); line-height: var(--wc-line-height-base); white-space: nowrap; }
.wc-mark { display: block; height: 24px; max-width: 72px; width: auto; object-fit: contain; flex: none; }
.wc-lockup[data-size="20"] .wc-mark { height: 20px; }
.wc-mark-top { height: 48px; max-width: 144px; margin: 0 auto var(--wc-space-3); }

/* containers: strip and persistent HUD */
.wc-strip {
  position: fixed; z-index: 10; left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + var(--wc-space-2));
  height: 40px; padding: 0 var(--wc-space-3); border-radius: var(--wc-radius-m);
  background: var(--wc-container-bg); border: 1px solid var(--wc-container-border);
  display: flex; align-items: center; justify-content: space-between; gap: var(--wc-space-3);
  container-type: inline-size; pointer-events: none;
}
.wc-strip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--wc-font-size-s); font-weight: var(--wc-font-weight-bold); line-height: var(--wc-line-height-tight); }
.wc-hud-items { display: flex; align-items: center; gap: var(--wc-space-4); min-width: 0; flex: 1 1 auto; overflow: hidden; }
.wc-hud-item { display: flex; flex-direction: column; min-width: 0; }
.wc-hud-item-label { color: var(--wc-color-text-muted); font-size: var(--wc-font-size-xs); font-weight: var(--wc-font-weight-regular); line-height: var(--wc-line-height-tight); white-space: nowrap; }
.wc-hud-item-value { font-size: var(--wc-font-size-s); font-weight: var(--wc-font-weight-bold); line-height: var(--wc-line-height-tight); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-strip .wc-lockup { flex: none; }
@container (max-width: 360px) { .wc-strip[data-items="2"] .wc-lockup-label, .wc-strip[data-items="3"] .wc-lockup-label { display: none; } }

/* containers: break overlay */
.wc-break-scrim { position: fixed; inset: 0; z-index: 15; background: var(--wc-color-scrim); display: flex; align-items: center; justify-content: center; padding: 0 var(--wc-space-4); animation: wc-fade var(--wc-motion-base) var(--wc-motion-ease); }
.wc-break {
  position: relative; width: 100%; max-width: 400px; max-height: 70dvh; overflow-y: auto;
  background: var(--wc-color-surface-raised); border-radius: var(--wc-radius-l); box-shadow: var(--wc-shadow-raised);
  padding: var(--wc-space-4);
}
.wc-close { position: absolute; top: 0; right: 0; width: var(--wc-anchor-hit); height: var(--wc-anchor-hit); display: flex; align-items: center; justify-content: center; color: var(--wc-color-text-muted); }
.wc-close svg { width: 16px; height: 16px; }
.wc-break-media { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--wc-radius-m); overflow: hidden; margin-top: calc(var(--wc-space-4) + var(--wc-space-1)); margin-bottom: var(--wc-space-3); }
.wc-break-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wc-break-title { margin: 0 var(--wc-anchor-hit) var(--wc-space-2) 0; }
.wc-break-media + .wc-break-title { margin-right: 0; }
.wc-break-body { margin: 0 0 var(--wc-space-3); font-size: var(--wc-font-size-s); font-weight: var(--wc-font-weight-regular); line-height: var(--wc-line-height-base); color: var(--wc-color-text-muted); }
.wc-break-cta { display: flex; flex-direction: column; align-items: stretch; gap: var(--wc-space-1); margin-top: var(--wc-space-3); }
.wc-break-cta .wc-btn-primary { height: 48px; }
.wc-break-note { text-align: center; color: var(--wc-color-text-muted); font-size: var(--wc-font-size-xs); font-weight: var(--wc-font-weight-regular); line-height: var(--wc-line-height-base); }

/* containers: payoff panel */
.wc-payoff {
  position: fixed; z-index: 12; left: 16px; right: 16px; text-align: center;
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--wc-space-4));
  background: var(--wc-color-surface-raised); border-radius: var(--wc-radius-l); padding: var(--wc-space-4);
  border: 1px solid var(--wc-color-line);
  max-height: 70dvh; overflow-y: auto;
  animation: wc-rise var(--wc-motion-base) var(--wc-motion-ease);
}
.wc-root.wc-has-hud .wc-payoff { bottom: calc(env(safe-area-inset-bottom, 0px) + var(--wc-space-2) + 40px + var(--wc-space-4)); }
.wc-payoff-title { margin: 0; }
.wc-payoff-body { margin: var(--wc-space-2) 0 0; }
.wc-follow { margin-top: var(--wc-space-1); }
.wc-payoff .wc-lockup { margin-top: var(--wc-space-3); }
.wc-payoff-note { margin: var(--wc-space-2) 0 0; color: var(--wc-color-text-muted); font-size: var(--wc-font-size-xs); font-weight: var(--wc-font-weight-regular); line-height: var(--wc-line-height-base); }
.wc-split { margin-top: var(--wc-space-3); text-align: left; }
.wc-split-eyebrow { color: var(--wc-color-text-muted); font-size: var(--wc-font-size-xs); font-weight: var(--wc-font-weight-regular); line-height: var(--wc-line-height-base); }
.wc-split-row { margin-top: var(--wc-space-3); }
.wc-split-head { display: flex; justify-content: space-between; font-size: var(--wc-font-size-s); font-weight: var(--wc-font-weight-bold); line-height: var(--wc-line-height-tight); }
.wc-bar-track { margin-top: var(--wc-space-1); height: 8px; border-radius: var(--wc-radius-full); background: var(--wc-color-line); overflow: hidden; }
.wc-bar-fill { height: 100%; border-radius: var(--wc-radius-full); background: var(--wc-color-text-muted); }
.wc-bar-fill[data-mine="1"] { background: var(--wc-color-team); }

@media (prefers-reduced-motion: reduce) {
  .wc-sheet, .wc-payoff { animation: wc-fade var(--wc-motion-fast) linear; }
  .wc-ring { animation: none; }
}