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

/*
 * Tip 013: a faint halo that sweeps up a page from an assistant's prompt
 * when it is clicked, like the flare ring of the sun in a lens. The scene on
 * top is a task manager in a browser window; fx.js draws the halo in one
 * WebGL pass over a capture of the desk, so it can bend the page it passes.
 * The dark board below plots how far the halo has gone over time and names
 * the palette and mode being shown.
 *
 * Positions in the scene are fixed pixels, shared with demo.js and fx.js:
 * the window is 1008 x 828 at (36, 36), its page starts under a 44px
 * toolbar, and the prompt opens from a 300 x 44 pill to a 460 x 100 card
 * whose bottom sits at y = 816, centered on x = 644. The window and the app
 * are at the size of a real browser window, not blown up for the post.
 */

:where(.tip-stage, .tip-stage *, .tip-stage *::before, .tip-stage *::after) {
  --lumno-corner-shape: round;
}

.tip-stage {
  --font: 'Inter', -apple-system, 'Helvetica Neue', sans-serif;
  --ui: 'Geist', 'Inter', -apple-system, sans-serif;
  --scene-h: 900px;
  padding: 0;
  background: #141416;
  font-family: var(--font);
  font-feature-settings: 'cv11';
}

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

/* ---------- The desk ---------- */

/* Colors are tokens here, so the dark mode only swaps them. */
.scene {
  --bg: #ffffff;
  --chrome: #f6f6f7;
  --field: #ececef;
  --side: #fbfbfb;
  --card: #ffffff;
  --hover: #f1f1f3;
  --line: rgba(15, 23, 42, 0.08);
  --line-strong: rgba(15, 23, 42, 0.12);
  --text: #111113;
  --soft: #4f4f57;
  --faint: #8a8a93;
  --lift: 0 1px 2px rgba(15, 23, 42, 0.05);

  position: absolute;
  inset: 0 0 auto;
  height: var(--scene-h);
  overflow: hidden;
}

.scene[data-mode="dark"] {
  --bg: #141416;
  --chrome: #1c1c1f;
  --field: #27272b;
  --side: #17171a;
  --card: #1b1b1e;
  --hover: #232327;
  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.11);
  --text: #f4f4f5;
  --soft: #b0b0b8;
  --faint: #76767f;
  --lift: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.desk {
  position: absolute;
  inset: 0;
  background: url('./media/wallpaper.webp') 50% 50% / cover no-repeat;
}

/* A veil over the wallpaper, under the window. */
.desk::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 12, 0.35);
  opacity: 0;
}

.scene[data-mode="dark"] .desk::before { opacity: 1; }

.window {
  position: absolute;
  left: 36px;
  top: 36px;
  width: 1008px;
  height: 828px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--bg);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18), 0 30px 80px -20px rgba(0, 0, 0, 0.55);
  color: var(--text);
  font: 400 13px/1.45 var(--ui);
  letter-spacing: -0.006em;
  font-feature-settings: 'ss01', 'tnum';
}

.scene[data-mode="dark"] .window { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 30px 80px -20px rgba(0, 0, 0, 0.7); }

.window p { margin: 0; }
.window i { font-style: normal; }

.window svg {
  flex: none;
  width: 15px;
  height: 15px;
  stroke-width: 1.75;
}

.bar {
  position: relative;
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 14px;
  background: var(--chrome);
  box-shadow: inset 0 -1px 0 var(--line);
  color: var(--faint);
}

.lights { display: flex; gap: 8px; }
.lights i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12); }
.lights i:nth-child(2) { background: #febc2e; }
.lights i:nth-child(3) { background: #28c840; }

.nav { display: flex; gap: 6px; margin-left: 20px; }
.nav svg, .tools svg { width: 17px; height: 17px; }
.nav svg + svg { opacity: 0.4; }

.url {
  position: absolute;
  left: 50%;
  width: 400px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 8px;
  background: var(--field);
  color: var(--soft);
  font-size: 12.5px;
  translate: -50% 0;
}

.url svg { width: 12px; height: 12px; }
.tools { display: flex; gap: 16px; margin-left: auto; }

/* The app: a sidebar and the project's timeline. */
.app {
  display: grid;
  grid-template-columns: 216px 1fr;
  height: calc(100% - 44px);
}

.side {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 12px 10px;
  background: var(--side);
  box-shadow: inset -1px 0 0 var(--line);
}

.org {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 6px 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.org > svg { width: 14px; height: 14px; margin-left: auto; color: var(--faint); }

.logo {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(140deg, #6d72ff, #3fb8f5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 1px 2px rgba(37, 52, 120, 0.3);
  color: #ffffff;
}

.logo svg { width: 13px; height: 13px; stroke-width: 2.2; }

.side-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  margin-bottom: 10px;
  padding: 0 8px;
  border-radius: 8px;
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--line-strong), var(--lift);
  color: var(--faint);
}

.side-search svg { width: 14px; height: 14px; }

.side-search kbd {
  margin-left: auto;
  padding: 2px 5px;
  border-radius: 4px;
  box-shadow: 0 0 0 1px var(--line-strong);
  font: 500 10.5px/1 var(--ui);
}

.menu { display: flex; flex-direction: column; gap: 1px; margin: 0; padding: 0; list-style: none; }

.menu li {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 30px;
  padding: 0 8px;
  border-radius: 7px;
  color: var(--soft);
  font-weight: 500;
}

.menu li svg { width: 16px; height: 16px; color: var(--faint); }
.menu li b { margin-left: auto; color: var(--faint); font-size: 11.5px; font-weight: 500; }
.menu li.is-on { background: var(--hover); color: var(--text); box-shadow: 0 0 0 1px var(--line); }
.menu li.is-on svg { color: var(--text); }
.menu li.is-here { color: var(--text); }
.swatch { width: 8px; height: 8px; margin: 0 4px; border-radius: 2.5px; background: var(--c); }

.side-label {
  margin: 16px 0 4px !important;
  padding: 0 8px;
  color: var(--faint);
  font-size: 11.5px;
  font-weight: 500;
}

.me {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto !important;
  padding: 8px 6px;
  font-weight: 500;
}

.me span { display: flex; flex-direction: column; line-height: 1.25; }
.me small { color: var(--faint); font-size: 11.5px; font-weight: 400; }

.avatar {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--a);
  color: #ffffff;
  font: 600 10px/1 var(--ui);
  letter-spacing: 0.02em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.avatar.is-sm { width: 18px; height: 18px; font-size: 7.5px; }

.main { padding: 0 32px; overflow: hidden; }

.main-head {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 54px;
  margin: 0 -32px;
  padding: 0 32px;
  box-shadow: inset 0 -1px 0 var(--line);
}

.crumbs { display: flex; align-items: center; gap: 6px; margin-right: auto !important; color: var(--faint); font-weight: 500; }
.crumbs svg { width: 13px; height: 13px; opacity: 0.7; }
.crumbs b { color: var(--text); font-weight: 600; }

.faces { display: flex; margin-right: 6px; }
.faces .avatar { width: 24px; height: 24px; margin-left: -6px; box-shadow: 0 0 0 2px var(--bg); font-size: 9px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 11px;
  border-radius: 8px;
  background: var(--card);
  box-shadow: 0 0 0 1px var(--line-strong), var(--lift);
  color: var(--soft);
  font-weight: 500;
}

.btn svg { width: 14px; height: 14px; }

.tabs {
  display: flex;
  gap: 24px;
  margin-top: 12px;
  box-shadow: inset 0 -1px 0 var(--line);
}

.tabs span {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  color: var(--faint);
  font-weight: 500;
}

.tabs svg { width: 15px; height: 15px; }
.tabs .is-on { color: var(--text); box-shadow: inset 0 -2px 0 var(--text); }

.title { margin: 24px 0 0; font: 600 20px/1.3 var(--ui); letter-spacing: -0.025em; }
.lede { margin-top: 4px !important; color: var(--soft); }

.chips { display: flex; gap: 6px; margin: 16px 0 20px !important; }

.chips span {
  height: 28px;
  padding: 0 12px;
  border-radius: 8px;
  box-shadow: 0 0 0 1px var(--line-strong);
  color: var(--soft);
  font-weight: 500;
  line-height: 28px;
}

.chips .is-on { background: var(--text); box-shadow: none; color: var(--bg); }

.events {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0 0 0 46px;
  list-style: none;
}

/* The rail the nodes sit on. */
.events::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 14px;
  bottom: 0;
  width: 1px;
  background: linear-gradient(var(--line-strong), var(--line-strong)) 0 0 / 1px 100%;
}

.event { position: relative; }

.node {
  position: absolute;
  left: -46px;
  top: 12px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--line-strong), var(--lift);
  color: #5468ff;
}

.node svg { width: 14px; height: 14px; }
.node.is-done { color: #16a34a; }

.card {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 0 0 1px var(--line-strong), 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px -6px rgba(15, 23, 42, 0.08);
}

.card-head { display: flex; align-items: baseline; gap: 12px; }
.card-head b { font-size: 14px; font-weight: 600; letter-spacing: -0.015em; }
.card-head time { margin-left: auto; color: var(--faint); font-size: 12px; }

.meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 5px !important;
  color: var(--soft);
}

.meta > svg { width: 13px; height: 13px; color: #8b5cf6; }
.meta .sep { width: 3px; height: 3px; margin: 0 2px; border-radius: 50%; background: var(--faint); opacity: 0.6; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  margin-left: 4px;
  padding: 0 7px;
  border-radius: 6px;
  background: color-mix(in srgb, currentColor 10%, transparent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.tag svg { width: 12px; height: 12px; }
.tag + .tag { margin-left: 0; }
.tag.is-warn { color: #e2620a; }
.tag.is-info { color: #2f6bea; }
.tag.is-bad { color: #dc2f2f; }
.tag.is-good { color: #15924a; }

.outcome {
  margin-top: 12px !important;
  padding-top: 11px;
  box-shadow: inset 0 1px 0 var(--line);
  color: var(--faint);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pills { display: flex; align-items: center; gap: 6px; margin-top: 8px !important; }

.pills span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 11px;
  border-radius: 14px;
  background: var(--hover);
  color: var(--soft);
  font-size: 12px;
}

.pills span svg { width: 12px; height: 12px; color: var(--faint); }
.pills b { color: var(--text); font-weight: 600; }
.pills span > b:first-of-type { margin-left: 3px; }

.pills a {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  color: var(--soft);
  font-weight: 500;
}

.pills a svg { width: 14px; height: 14px; }

/* ---------- The effect ---------- */

.fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
}

.fx.is-ready { visibility: visible; }

/* The capture for the plate shows the desk alone. */
.tip-stage[data-plate] :is(.fx, .overlay) { display: none; }

/* The capture of the page's lines alone, for the shader to light them by:
   every rule and border in white, at its own width, on black; no text,
   icons, pictures, fills or shadows. */
.tip-stage[data-lines] .scene {
  --bg: #000000;
  --chrome: #000000;
  --side: #000000;
  --field: transparent;
  --card: transparent;
  --hover: transparent;
  --pill: transparent;
  --line: #ffffff;
  --line-strong: #ffffff;
  --text: #ffffff;
  --soft: transparent;
  --faint: transparent;
  --lift: 0 0 transparent;
}

.tip-stage[data-lines] .desk { background: #000000; }
.tip-stage[data-lines] .window { box-shadow: none; }
.tip-stage[data-lines] .window * { color: transparent !important; }
.tip-stage[data-lines] .window :is(svg, img, kbd, .avatar, .faces, .swatch, .logo, .lights, .tag) { visibility: hidden; }
.tip-stage[data-lines] .card { box-shadow: 0 0 0 1px #ffffff; }
.tip-stage[data-lines] .chips .is-on { background: transparent; box-shadow: 0 0 0 1px #ffffff; }

/* ---------- Above the effect ---------- */

.overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-family: var(--ui);
}

.overlay svg { flex: none; stroke-width: 1.75; }

/* The prompt: a small pill until it is clicked, then a white card with the
   field on top and a toolbar under a hairline. demo.js sets its box as it
   springs between the two; it sits well off the page, so its shadow is wide
   and soft. */
.prompt {
  position: absolute;
  left: 494px;
  top: 772px;
  width: 300px;
  height: 44px;
  overflow: hidden;
  border-radius: 22px;
  background: #ffffff;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.09),
    0 2px 4px rgba(15, 23, 42, 0.04),
    0 28px 64px -16px rgba(15, 23, 42, 0.22);
  transition: background-color 450ms ease, box-shadow 450ms ease, scale 120ms ease;
}

/* The press dips the pill a little. */
.prompt[data-state="pressed"] { scale: 0.97; }

/* Colors inside the prompt cross-fade with the mode. */
.prompt :is(.mini, .mini kbd, .mini svg, .toolbar, .round, .pick, .pick svg, .rule, .prompt-send, .prompt-hint, .prompt-text) {
  transition: color 450ms ease, background-color 450ms ease, box-shadow 450ms ease;
}

.mini {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px 0 16px;
  color: #8a8a93;
  font: 400 14px/1 var(--ui);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.mini svg { width: 16px; height: 16px; color: #8b5cf6; }

.mini kbd {
  margin-left: auto;
  padding: 3px 6px;
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12);
  color: #8a8a93;
  font: 500 11px/1 var(--ui);
}

/* The open card's content, pinned to the bottom middle so opening reveals
   it from the center out. */
.full {
  position: absolute;
  left: 50%;
  bottom: 0;
  translate: -50% 0;
  width: 460px;
  height: 100px;
  display: flex;
  flex-direction: column;
  opacity: 0;
}

/* A brushed-metal edge: a light silver gradient on a 1px border, with a
   soft highlight that demo.js turns once around it as the card opens. */
.sheen {
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background:
    conic-gradient(from var(--turn, 0deg), transparent 0deg 280deg, rgba(255, 255, 255, 0.8) 325deg, transparent 360deg),
    linear-gradient(120deg, #eef0f3, #c4cad2 28%, #f1f3f5 50%, #bcc3cc 74%, #e9ecef);
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: calc(var(--shine, 0) * 0.75);
}

/* One line of text, 15px, starting where the caret does. */
.field {
  display: flex;
  align-items: center;
  height: 48px;
  margin: 0;
  padding: 2px 16px 0;
  font: 400 15px/22px var(--ui);
  letter-spacing: -0.01em;
}

.prompt-text { color: #111113; white-space: pre; }
.prompt-hint { color: #9a9aa3; }

.caret {
  width: 1.5px;
  height: 19px;
  margin: 0 1px;
  border-radius: 1px;
  background: #3b82f6;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 52px;
  padding: 0 10px;
  box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.07);
  color: #5d5d66;
}

.round,
.pick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.11), 0 1px 2px rgba(15, 23, 42, 0.06);
}

.round { width: 32px; }
.round svg { width: 16px; height: 16px; }
.round.is-end { margin-left: auto; }

.rule {
  width: 1px;
  height: 18px;
  margin: 0 2px;
  background: rgba(15, 23, 42, 0.1);
}

.pick {
  gap: 6px;
  padding: 0 9px 0 10px;
  color: #1b1b1f;
  font: 500 13px/1 var(--ui);
  letter-spacing: -0.01em;
}

.pick svg { width: 15px; height: 15px; color: #6b6b74; }
.pick svg:last-child { width: 13px; height: 13px; }

.prompt-send {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e4e4e8;
  color: #ffffff;
}

.prompt-send .arrow { width: 16px; height: 16px; stroke-width: 2.2; }

/* ---------- Dark mode ---------- */

.scene[data-mode="dark"] .prompt {
  background: #1e1e21;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 2px 4px rgba(0, 0, 0, 0.2), 0 28px 64px -16px rgba(0, 0, 0, 0.6);
}

.scene[data-mode="dark"] .mini { color: #8a8a93; }
.scene[data-mode="dark"] .mini kbd { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); color: #8a8a93; }
.scene[data-mode="dark"] .mini svg { color: #a78bfa; }
.scene[data-mode="dark"] .sheen {
  background:
    conic-gradient(from var(--turn, 0deg), transparent 0deg 280deg, rgba(255, 255, 255, 0.75) 325deg, transparent 360deg),
    linear-gradient(120deg, #4a4f57, #33373d 28%, #555b63 50%, #31353b 74%, #474c54);
}
.scene[data-mode="dark"] .prompt-text { color: #f2f2f4; }
.scene[data-mode="dark"] .prompt-hint { color: #6f6f78; }
.scene[data-mode="dark"] .toolbar { color: #9a9aa3; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); }
.scene[data-mode="dark"] :is(.round, .pick) { background: #26262a; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09), 0 1px 2px rgba(0, 0, 0, 0.3); }
.scene[data-mode="dark"] .pick { color: #e8e8ec; }
.scene[data-mode="dark"] .pick svg { color: #9a9aa3; }
.scene[data-mode="dark"] .rule { background: rgba(255, 255, 255, 0.1); }
.scene[data-mode="dark"] .prompt-send { background: #34343a; color: #7d7d86; }

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

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

.graph { margin: 0; }
.graph svg { display: block; width: 380px; height: 345px; overflow: visible; }
.graph .axis { stroke: rgba(255, 255, 255, 0.28); stroke-width: 2; }
.graph .grid { stroke: rgba(255, 255, 255, 0.1); stroke-width: 2; stroke-dasharray: 4 6; }
.graph .curve { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.graph .dot { fill: #ffffff; stroke: var(--accent); stroke-width: 5; }
.graph .label { fill: rgba(255, 255, 255, 0.45); font: 500 18px/1 var(--font); }

.about { display: flex; flex-direction: column; min-width: 0; padding-top: 4px; }

.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;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 15px;
  color: rgba(255, 255, 255, 0.5);
  font: 600 18px/1 var(--font);
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: color 240ms ease;
}

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

.kind i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

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

/* The mode, after the palette's name. */
.about-name span {
  margin-left: 14px;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 500;
  letter-spacing: -0.02em;
}

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

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

.code i { font-style: normal; }
.code .kw { color: #8ab4f8; }
.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; }