@import url('https://fonts.googleapis.com/css2?family=Geist:wght@500;600&display=swap');

/* Tip 004: inner radii that follow r = R - p, then continuous corners. */

.tip-stage:has(> .tip-credit) { padding: 0; }

.area-top,
.area-bottom {
  position: absolute;
  left: 0;
  right: 0;
}

/* Above: the dialog over a photo. */
.area-top {
  top: 0;
  height: 840px;
  background: url('media/backdrop.jpg') center 40% / cover;
}

/* Below: the explainer, in dark mode. */
.area-bottom {
  top: 840px;
  bottom: 0;
  background: #151515;
}

/* ---------- Modal ---------- */

/*
 * Every radius in the modal comes from these variables so the demo can move
 * them: --shape is the corner curve, the rest are the inner radii. The modal
 * is 32 with 16 padding; the receive panel is 16 with its currency chip 8 in.
 * Every length inside is a multiple of 4.
 */
.modal {
  --shape: superellipse(1);
  --panel-r: 24px;
  --info-r: 12px;
  --chip-r: 16px;
  --btn-r: 12px;
  position: absolute;
  left: 50%;
  top: 100px;
  width: 440px;
  padding: 16px;
  border: 1px solid #e6e4ef;
  border-radius: 32px;
  background: #ffffff;
  color: #13112b;
  font: 400 14px/1.2 var(--tip-font-sans);
  box-shadow: 0 1px 2px rgba(20, 22, 16, 0.08), 0 30px 60px -20px rgba(20, 22, 16, 0.4);
  transform: translateX(-50%) scale(1.12);
  transform-origin: 50% 0;
}

.modal,
.modal *,
.modal *::after { --lumno-corner-shape: var(--shape); }
.modal .m-swap,
.modal .coin { --lumno-corner-shape: round; }

.m-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
  padding: 0 4px;
  margin-bottom: 12px;
}

.m-head h1 { margin: 0; font: 500 19px/1 var(--tip-font-sans); }
.m-close { width: 20px; height: 20px; color: #7c7a93; }

.m-panel {
  padding: 16px;
  border-radius: var(--panel-r);
  background: #f6f6f8;
}

.m-receive { margin-top: 12px; }

.m-label {
  display: block;
  color: #6f6d86;
  font: 500 11px/1 var(--tip-font-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.m-amount {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 8px;
}

.m-amount b {
  display: block;
  font: 600 36px/1 'Geist', var(--tip-font-sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

.m-usd {
  display: block;
  margin-top: 4px;
  color: #6f6d86;
  font-size: 14px;
}


.chip {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 8px 0 4px;
  border: 1px solid #e3e2ea;
  border-radius: var(--chip-r);
  background: #ffffff;
  font: 500 14px/1 var(--tip-font-sans);
  box-shadow: 0 1px 2px rgba(20, 18, 50, 0.06);
}

/* Both currency chips sit in their panel's bottom-right corner, 8px in. */
.m-panel { position: relative; min-height: 104px; }
.chip { position: absolute; right: 8px; bottom: 8px; }

.updown { width: 16px; height: 16px; color: #8e8ca3; }

.coin {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-style: normal;
}

.coin { overflow: hidden; box-shadow: 0 0 0 1px rgba(20, 18, 50, 0.08); }
.coin svg { width: 100%; height: 100%; }

.m-swap {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: -16px auto;
  border: 1px solid #e3e2ea;
  border-radius: 50%;
  background: #ffffff;
  color: #6f6d86;
}

.m-swap svg { width: 16px; height: 16px; }

.m-info {
  margin-top: 12px;
  padding: 4px 12px;
  border: 1px solid #ebeaf1;
  border-radius: var(--info-r);
}

.m-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 28px;
  font-size: 14px;
}

.m-row span { color: #6f6d86; }
.m-row b { font: 500 14px/1 'Geist', var(--tip-font-sans); font-variant-numeric: tabular-nums; }
.m-row .m-good { color: #15803d; }

.m-checks {
  display: grid;
  gap: 8px;
  margin: 16px 0;
  padding: 0 4px;
  color: #374151;
  font-size: 14px;
}

.m-checks label { display: flex; align-items: center; gap: 8px; height: 20px; }

.box {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1.5px solid #c9c7d3;
  border-radius: 4px;
  background: #ffffff;
  color: #ffffff;
}

.box svg { width: 12px; height: 12px; opacity: 0; }
.box-on { border-color: #273042; background: #273042; }
.box-on svg { opacity: 1; }

.m-cta {
  display: flex;
  width: 100%;
  height: 48px;
  border-radius: var(--btn-r);
  font-size: 15px;
}

/* ---------- Construction guides ---------- */

/* Dims the photo while guides are up so thin lines read over it. */
.scrim {
  position: absolute;
  inset: 0;
  background: rgba(8, 12, 20, 0.58);
  opacity: 0;
}

.guides {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.guides line,
.guides circle[class^="ring"] { fill: none; stroke-width: 1.5; }
.line-outer,
.ring-outer { stroke: #ff4f8b; }
.line-inner,
.ring-inner { stroke: #2fa8ff; }
.guides .edge { stroke-width: 1; opacity: 0.7; }
.ring-ref { stroke: rgba(255, 255, 255, 0.7); }
.face-outer { fill: rgba(255, 79, 139, 0.12); }
.face-inner { fill: rgba(47, 168, 255, 0.16); }
.knot-outer { fill: #ffffff; stroke: #ff4f8b; stroke-width: 1.5; }
.knot-inner { fill: #ffffff; stroke: #2fa8ff; stroke-width: 1.5; }
.dot-outer { fill: #ff4f8b; }
.dot-inner { fill: #2fa8ff; }
.arc-outer,
.arc-inner { fill: none; stroke-width: 3; stroke-linecap: round; }
.arc-outer { stroke: #ff4f8b; }
.arc-inner { stroke: #2fa8ff; }
.leader { stroke: rgba(255, 255, 255, 0.55); stroke-width: 1; }
.callout { fill: #ffffff; font: 600 22px var(--tip-font-mono); dominant-baseline: central; }
.callout-outer { fill: #ff8fb4; }
.g-comb path.teeth { fill: none; stroke: var(--comb); stroke-width: 1.2; }
.g-comb path.envelope { fill: none; stroke: var(--comb); stroke-width: 2.5; stroke-linejoin: round; }

/* ---------- Diagram ---------- */

.defs { position: absolute; }

.fig {
  position: absolute;
  left: 50%;
  top: 862px;
  width: 570px;
  height: 271px;
  overflow: visible;
  transform: translateX(-50%);
}

.nf-outer { fill: #f5f5f5; }
.nf-inner { fill: #333a4b; }
.nf-arc-outer,
.nf-arc-inner { fill: none; stroke-width: 6; stroke-linecap: round; }
.nf-arc-outer { stroke: #ff4f8b; }
.nf-arc-inner { stroke: #2fa8ff; }
.nf-radius-outer,
.nf-radius-inner { fill: none; stroke-width: 3; stroke-dasharray: 10 9; }
.nf-radius-outer { stroke: #ff4f8b; }
.nf-radius-inner { stroke: #2fa8ff; }
.nf-dot-outer { fill: #ff4f8b; stroke: #f5f5f5; stroke-width: 4; }
.nf-dot-inner { fill: #2fa8ff; stroke: #f5f5f5; stroke-width: 3; }
.nf-gap { fill: none; stroke: #f59e0b; stroke-width: 4; stroke-linecap: round; }
.nf-gap-label { fill: #b45309; font: 700 30px var(--tip-font-mono); dominant-baseline: central; }

.tag text { fill: #ffffff; font: 600 27px var(--tip-font-mono); dominant-baseline: central; }
.tag rect { fill: #2fa8ff; }
.tag-outer rect { fill: #ff4f8b; }

.cf-shape { fill: #f5f5f5; }
.cf-fill { fill: var(--comb); fill-opacity: 0.2; }
.cf-ref { fill: none; stroke: #9a9a9a; stroke-width: 3; stroke-dasharray: 9 9; }
.cf-teeth { fill: none; stroke: var(--comb); stroke-width: 2; opacity: 0.45; }
.cf-envelope { fill: none; stroke: var(--comb); stroke-width: 5; stroke-linejoin: round; }
.cf-joint { fill: var(--comb); stroke: #151515; stroke-width: 4; }
.cf-leader { fill: none; stroke: var(--comb); stroke-width: 2.5; }
.cf-say { font: 600 28px var(--tip-font-mono); dominant-baseline: central; }
.cf-say-round { fill: #ff6b70; }
.cf-say-smooth { fill: #4db3ff; }

/* ---------- Caption ---------- */

.caption {
  position: absolute;
  left: 0;
  right: 0;
  top: 1146px;
  display: grid;
  justify-items: center;
  gap: 8px;
  color: #ededed;
  text-align: center;
}

.cap-step {
  padding: 4px 10px;
  border-radius: 8px;
  background: #262626;
  color: #9a9a9a;
  font: 500 18px/1 var(--tip-font-mono);
}

.caption h2 {
  margin: 4px 0 2px;
  font: 600 30px/1.1 var(--tip-font-sans);
}

.caption code {
  color: #a3a3a3;
  font: 500 21px/1.2 var(--tip-font-mono);
  white-space: pre;
}

.caption .css {
  margin: 4px 0 0;
  padding: 16px 24px;
  border-radius: 16px;
  background: #1f1f1f;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  color: #8f8f8f;
  font: 500 22px/1.6 var(--tip-font-mono);
  text-align: left;
}

.css .prop { color: #9ecbff; }
.css .val { color: #f5f5f5; }

.tip-credit { bottom: 34px; color: #8f8f8f; }
.tip-credit img { filter: invert(1); }