@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400..600&family=Inter:opsz,wght@14..32,400..700&display=swap');

/*
 * Tip 014: four ways for a deleted card to leave, and how the cards around
 * it answer. The scene on top is a list
 * of saved questions on a phone; deleting one hands its picture to fx.js,
 * which takes it apart in WebGL, and the cards below move up. The dark board
 * names the effect and shows the lines behind it.
 *
 * Positions are fixed pixels shared with demo.js: the screen is 472 wide and
 * the list's cards are 432 wide, 20px in from its sides. Rounded corners are
 * continuous (superellipse) from _base; circles opt out.
 */

.tip-stage {
  --font: 'Inter', -apple-system, 'Helvetica Neue', sans-serif;
  --ui: 'Inter', -apple-system, sans-serif;
  --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --scene-h: 920px;
  padding: 0;
  background: #141416;
  font-family: var(--font);
}

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

/* ---------- The phone ----------
   An iPhone's screen corner is about 15.4% of its width, on Apple's
   continuous curve. That curve starts about 1.53 radii from the corner and
   passes through the same diagonal point as the circle, which a CSS
   superellipse of exponent 1.7 at 1.53 times the radius follows closely. */

.scene {
  position: absolute;
  inset: 0 0 auto;
  height: var(--scene-h);
  overflow: hidden;
  background: url('./media/backdrop.webp') 50% 42% / cover no-repeat;
}

.phone {
  position: absolute;
  left: 290px;
  bottom: 36px;
  width: 500px;
  height: 1060px;
  padding: 14px;
  border-radius: 87px;
  background: #0c0c0d;
  box-shadow: 0 0 0 2px #2b2b2e, 0 40px 90px -30px rgba(20, 20, 24, 0.55);
}

.screen {
  position: relative;
  width: 472px;
  height: 1032px;
  overflow: hidden;
  border-radius: 73px;
  background: linear-gradient(180deg, #efeeea, #e7e5df);
  color: #24211c;
  font-family: var(--ui);
}

@supports (corner-shape: superellipse(1.7)) {
  .phone { --lumno-corner-shape: superellipse(1.7); border-radius: 132px; }
  .screen { --lumno-corner-shape: superellipse(1.7); border-radius: 111px; }
}

/* Above the effects, so a flame passes behind the heading. */
.top {
  position: absolute;
  z-index: 1;
  left: 28px;
  top: 212px;
}

.title {
  margin: 0;
  color: #1f1c17;
  font: 500 50px/1 var(--serif);
  letter-spacing: -0.02em;
}

.count {
  margin: 10px 0 0;
  color: rgba(40, 34, 24, 0.5);
  font: 500 18px/1 var(--ui);
  letter-spacing: -0.01em;
}

/* ---------- The cards ---------- */

.list {
  position: absolute;
  left: 20px;
  top: 324px;
  width: 432px;
}

.card {
  position: absolute;
  left: 0;
  top: 0;
  width: 432px;
  padding: 20px 58px 24px 24px;
  border-radius: 30px;
  /* Light from the effect on a neighboring card, part of the card's own fill so
     it shares the card's edge. demo.js moves it. */
  background:
    radial-gradient(circle 230px at var(--gx, 50%) var(--gy, 50%), color-mix(in srgb, var(--gc, transparent) calc(min(var(--ga, 0), 1) * 100%), transparent), transparent 72%),
    #ffffff;
  box-shadow: inset 0 0 0 1px rgba(60, 50, 30, 0.08);
  will-change: transform;
}

.card-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #8b7b60;
  font: 600 14px/18px var(--ui);
  letter-spacing: 0.01em;
}

.card-tag i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dot);
  --lumno-corner-shape: round;
}

.card-text {
  margin: 8px 0 0;
  color: #2b251c;
  font: 500 23px/29px var(--serif);
  letter-spacing: -0.008em;
}

.x {
  --lumno-corner-shape: round;
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(92, 70, 36, 0.09);
  color: #76684f;
  transition: scale 120ms ease;
}

.x[data-state="pressed"] { scale: 0.86; }

.x svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* With HTML-in-Canvas the page reaches the screen through this canvas. */
.live {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.live-page {
  position: absolute;
  left: 0;
  top: 0;
  width: 472px;
  height: 1032px;
}

.fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---------- The dock ---------- */

.dock {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 130px;
  display: flex;
  justify-content: center;
}

.new {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 56px;
  padding: 0 24px 0 18px;
  border-radius: 28px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(60, 50, 30, 0.08);
  color: #3a342a;
  font: 600 18px/1 var(--ui);
  letter-spacing: -0.01em;
  --lumno-corner-shape: round;
}

.new svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.home {
  position: absolute;
  left: 50%;
  bottom: 12px;
  width: 170px;
  height: 6px;
  border-radius: 3px;
  background: #1f1c17;
  translate: -50% 0;
  --lumno-corner-shape: round;
}

/* ---------- The board ---------- */

.board {
  position: absolute;
  inset: var(--scene-h) 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 44px;
  padding: 56px 60px 0;
  background: #141416;
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.06);
  color: #e4e4e7;
}

.about { display: flex; flex-direction: column; min-width: 0; }

.kinds {
  position: relative;
  align-self: flex-start;
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.07);
}

/* Placed on the current tab by demo.js. */
.kinds-pill {
  position: absolute;
  top: 4px;
  left: 0;
  height: calc(100% - 8px);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.14);
}

.kind {
  position: relative;
  padding: 11px 18px;
  color: rgba(255, 255, 255, 0.5);
  font: 600 19px/1 var(--font);
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: color 240ms ease;
}

.kind.is-on { color: #ffffff; }

.about-name {
  margin: 28px 0 0;
  color: #ffffff;
  font: 650 46px/1.05 var(--font);
  letter-spacing: -0.03em;
}

.about-use {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font: 500 22px/1.4 var(--font);
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.code {
  margin: 0;
  padding: 18px 20px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  color: #d4d4d8;
  font: 500 15px/1.7 var(--tip-font-mono);
  white-space: pre;
}

.code i { font-style: normal; }
.code .num { color: #f6c177; }
.code .cmt { color: rgba(255, 255, 255, 0.4); }

.tip-credit { bottom: 30px; color: rgba(255, 255, 255, 0.42); }
.tip-credit img { opacity: 0.42; }