/* SvgForge website. Black and white only.
   The page sits on a soft silver "glaze" drawn with CSS gradients (no
   images): grey and white blobs, a drifting black blob and a fine grain.
   Text that sits straight on the glaze is filled with the same black blob,
   inverted: it is black on the light glaze and turns white where the black
   blob passes behind it. Boxes are either white with black text or black
   with white text. */
@property --bx {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 92%
}

@property --by {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 24%
}

:root {
  --black: #000;
  --white: #fff;
  --line: rgba(0, 0, 0, .1);
  --display: "Forge Display", "Century Gothic", "Avant Garde", system-ui, sans-serif;
  --text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --gutter: clamp(1rem, 4vw, 3rem);
  --wide: 76rem;
  --column: min(100% - 2 * var(--gutter), var(--wide));
  --radius: 24px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 24px 48px -28px rgba(0, 0, 0, .45);
  /* size of the black blob (its position, --bx/--by, drifts) */
  --glaze-w: 27vw;
  --glaze-h: 38vh;
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --tick-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --bang-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M12 5.5v8'/%3E%3Cpath d='M12 18.6h.01'/%3E%3C/svg%3E");
}

@keyframes drift {
  0% {
    --bx: 93%;
    --by: 22%
  }

  35% {
    --bx: 82%;
    --by: 34%
  }

  70% {
    --bx: 90%;
    --by: 46%
  }

  100% {
    --bx: 97%;
    --by: 28%
  }
}

*,
*::before,
*::after {
  box-sizing: border-box
}

html {
  background: #8f8f8f;
  color: var(--black);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth
}

body {
  margin: 0;
  font: 400 1.0625rem/1.65 var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip
}

/* ---------- the glaze ---------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none
}

/* The sticky header is painted with the same glaze, pinned to the screen, so
   page content scrolls out of sight beneath it. */
body::before,
.site-header {
  animation: drift 28s ease-in-out infinite alternate;
  background-attachment: fixed;
  background-image:
    radial-gradient(ellipse var(--glaze-w) var(--glaze-h) at var(--bx) var(--by), #000 0, rgba(0, 0, 0, .95) 40%, rgba(0, 0, 0, .55) 62%, transparent 85%),
    radial-gradient(26vw 18vh at 66% 4%, rgba(255, 255, 255, .8), transparent 70%),
    radial-gradient(48vw 38vh at 82% 76%, #ececec, transparent 72%),
    radial-gradient(44vw 32vh at 96% 100%, #d6d6d6, transparent 70%),
    radial-gradient(50vw 46vh at 0% 66%, #aca69f, transparent 72%),
    radial-gradient(46vw 34vh at 18% 100%, #c6c6c6, transparent 72%),
    radial-gradient(56vw 44vh at 6% 0%, #707070, transparent 72%),
    radial-gradient(62vw 34vh at 48% 40%, #6c6c6c, transparent 72%),
    linear-gradient(160deg, #7d7d7d 0%, #8c8c8c 40%, #b9b6b2 75%, #d9d9d9 100%)
}

/* grain: a very fine conic pattern that reads as film noise */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .07;
  mix-blend-mode: overlay;
  background: repeating-conic-gradient(#000 0 .00012%, #fff 0 .00024%) 60% 60%/2600px 2600px
}

/* ---------- text on the glaze: black, white where the black blob passes ---------- */
.wordmark,
.site-nav a:not(.button),
.hero h1,
.hero h1 .picked,
.hero .lead,
.text-link,
.perks li,
.caption,
.section .section-head>*,
.site-footer p,
.site-footer a,
.page-head h1,
.page-head .meta,
.page-head .kicker,
.lost h1,
.lost p:not(:last-child),
.lost::before {
  color: transparent;
  background: radial-gradient(ellipse var(--glaze-w) var(--glaze-h) at var(--bx) var(--by), #fff 0 49%, #000 55%) fixed;
  -webkit-background-clip: text;
  background-clip: text;
  animation: drift 28s ease-in-out infinite alternate
}

/* With site.js running, the fill is pinned to the window by hand (Safari
   ignores "fixed" for text filled with a background). */
.glaze-js :is(.wordmark, .site-nav a:not(.button), .hero h1, .hero h1 .picked, .hero .lead, .text-link, .perks li, .caption,
  .section .section-head > *, .site-footer p, .site-footer a, .page-head h1, .page-head .meta, .page-head .kicker,
  .lost h1, .lost p:not(:last-child)) {
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-size: var(--gw, 100vw) var(--gh, 100vh);
  background-position: var(--gx, 0) var(--gy, 0)
}

.kicker::before {
  background: radial-gradient(ellipse var(--glaze-w) var(--glaze-h) at var(--bx) var(--by), #fff 0 49%, #000 55%) fixed;
  animation: drift 28s ease-in-out infinite alternate
}

a {
  color: var(--black);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em
}

a:hover {
  text-decoration-thickness: 2px
}

:focus-visible {
  outline: 3px solid var(--black);
  outline-offset: 3px;
  border-radius: 4px;
  box-shadow: 0 0 0 6px var(--white)
}

::selection {
  background: var(--black);
  color: var(--white)
}

img,
svg {
  display: block
}

.skip {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 100;
  background: var(--black);
  color: var(--white);
  padding: .75rem 1rem;
  border-radius: 10px;
  font-family: var(--display)
}

.skip:focus {
  left: 1rem;
  top: 1rem
}

[id] {
  scroll-margin-top: 5.5rem
}

/* ---------- header and footer ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 2rem;
  flex-wrap: wrap;
  padding: .8rem max(var(--gutter), calc((100% - var(--wide)) / 2));
  border-bottom: 1px solid rgba(0, 0, 0, .08)
}

.wordmark {
  display: inline-flex;
  align-items: center;
  font: 700 1.375rem/1 var(--display);
  letter-spacing: -.02em;
  text-decoration: none
}

.wordmark span {
  font-weight: 400
}

.site-nav {
  display: flex;
  align-items: center;
  gap: .5rem 1.75rem;
  flex-wrap: wrap;
  font: 400 1rem/1.2 var(--display)
}

.site-nav a:not(.button) {
  text-decoration: none;
  padding: .25rem 0;
  transition: opacity .15s
}

.site-nav a:not(.button):hover {
  opacity: .65
}

.site-footer {
  width: var(--column);
  margin: clamp(4rem, 9vw, 6rem) auto 0;
  padding: 2rem 0 2.75rem;
  border-top: 1px solid rgba(0, 0, 0, .15);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem 2rem;
  font: 400 .9375rem/1.5 var(--display)
}

.site-footer p {
  margin: 0
}

.site-footer a {
  text-decoration-color: rgba(128, 128, 128, .9)
}

.site-footer nav {
  display: flex;
  gap: .5rem 1.5rem;
  flex-wrap: wrap
}

@media (max-width:720px) {
  .site-header {
    position: static
  }
}

@media (max-width:560px) {
  .site-nav a:not(.button) {
    display: none
  }

  .site-header .button {
    min-height: 2.5rem;
    padding: .6rem 1rem;
    font-size: .9375rem
  }
}

/* ---------- buttons ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 2.75rem;
  padding: .75rem 1.3rem;
  border-radius: 999px;
  font: 700 1rem/1 var(--display);
  letter-spacing: -.01em;
  text-decoration: none;
  color: var(--white);
  background: var(--black);
  border: 1.5px solid var(--black);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease
}

.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .7)
}

.button:active {
  transform: none
}

.button-primary {
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .8)
}

.button-light {
  color: var(--black);
  background: var(--white);
  border-color: var(--white)
}

.button-large {
  min-height: 3.25rem;
  padding: .95rem 1.6rem;
  font-size: 1.0625rem
}

.button .arrow {
  transition: transform .15s ease
}

.button:hover .arrow {
  transform: translateX(3px)
}

.text-link {
  font-family: var(--display);
  text-decoration: underline;
  text-decoration-color: rgba(128, 128, 128, .9);
  text-decoration-thickness: 2px
}

.text-link:hover {
  text-decoration-color: currentColor
}

/* ---------- shared pieces ---------- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1rem;
  font: 700 .8125rem/1.35 var(--display);
  letter-spacing: .09em;
  text-transform: uppercase
}

.kicker::before {
  content: "";
  flex: none;
  width: 1.6rem;
  height: 3px;
  border-radius: 2px
}

.icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: 14px;
  background: var(--black);
  color: var(--white)
}

.icon svg {
  width: 1.5rem;
  height: 1.5rem
}

.box {
  background: var(--white);
  color: var(--black);
  border-radius: var(--radius);
  box-shadow: var(--shadow)
}

/* ---------- home: hero ---------- */
.hero {
  position: relative;
  padding: clamp(3.5rem, 9vw, 6.5rem) var(--gutter) 0;
  text-align: center
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin: 0 0 1.75rem;
  padding: .45rem 1rem .45rem .6rem;
  border-radius: 999px;
  background: var(--white);
  color: var(--black);
  box-shadow: 0 8px 22px -12px rgba(0, 0, 0, .45);
  font: 400 .9375rem/1.25 var(--display)
}

.swatches {
  display: inline-flex;
  flex: none
}

.swatches i {
  width: .9rem;
  height: .9rem;
  border-radius: 50%;
  border: 2px solid var(--white);
  margin-left: -.35rem;
  background: var(--black)
}

.swatches i:first-child {
  margin-left: 0
}

.swatches i:nth-child(2) {
  background: #8a8a8a
}

.swatches i:nth-child(3) {
  background: #d0d0d0
}

.hero h1 {
  max-width: 11.5em;
  margin: 0 auto;
  font: 700 clamp(2.625rem, 8vw, 6.25rem)/.98 var(--display);
  letter-spacing: -.045em;
  text-wrap: balance
}

.nowrap {
  white-space: nowrap
}

/* inline (not inline-block) so the word stays part of the headline's text fill */
.picked {
  position: relative;
  color: inherit
}

.picked::before,
.picked::after {
  content: "";
  position: absolute;
  pointer-events: none;
  animation: appear .4s ease-out .5s both
}

.picked::before {
  inset: -.1em -.07em .11em;
  border: 2px solid var(--white);
  outline: 1px solid var(--black);
  border-radius: 2px
}

/* Extend the box's right edge slightly */
.picked::before {
  right: -.115em;
}

/* Move the right corner handles with it */
.picked::after {
  right: calc(-.115em - 6px);
}

.picked::after {
  inset: calc(-.1em - 6px) calc(-.07em - 6px) calc(.11em - 6px);
  background:
    linear-gradient(#fff 0 0) left 2px top 2px/8px 8px no-repeat, linear-gradient(#000 0 0) left top/12px 12px no-repeat,
    linear-gradient(#fff 0 0) right 2px top 2px/8px 8px no-repeat, linear-gradient(#000 0 0) right top/12px 12px no-repeat,
    linear-gradient(#fff 0 0) left 2px bottom 2px/8px 8px no-repeat, linear-gradient(#000 0 0) left bottom/12px 12px no-repeat,
    linear-gradient(#fff 0 0) right 2px bottom 2px/8px 8px no-repeat, linear-gradient(#000 0 0) right bottom/12px 12px no-repeat
}

.hero .lead {
  max-width: 39rem;
  margin: 1.75rem auto 2.25rem;
  font-size: clamp(1.125rem, 1.7vw, 1.3125rem);
  line-height: 1.6
}

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem 1.75rem
}

.perks {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem 1.75rem;
  font: 400 .9375rem/1.4 var(--display)
}

.perks li {
  display: inline-flex;
  align-items: center;
  gap: .5rem
}

.perks li::before {
  content: "";
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--white) var(--tick) center/.8rem no-repeat;
  box-shadow: 0 0 0 1px var(--black)
}

/* ---------- home: the editor canvas with five artboards (a black box) ---------- */
.showcase {
  width: var(--column);
  margin: clamp(3rem, 7vw, 4.5rem) auto 0
}

.studio {
  background: var(--black);
  color: var(--white);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 50px 100px -45px rgba(0, 0, 0, .85)
}

.studio-bar {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .8rem 1.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  font: 500 .8125rem/1 var(--mono);
  color: var(--white)
}

.studio-dots {
  display: flex;
  gap: 6px;
  flex: none
}

.studio-dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--white)
}

.studio-dots i:nth-child(2) {
  background: #9a9a9a
}

.studio-dots i:nth-child(3) {
  background: #4a4a4a
}

.studio-file {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.studio-chip {
  margin-left: auto;
  flex: none;
  padding: .4rem .65rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .35);
  color: var(--white)
}

.studio-export {
  flex: none;
  padding: .5rem .85rem;
  border-radius: 999px;
  background: var(--white);
  color: var(--black);
  font: 700 .8125rem/1 var(--display)
}

.boards {
  container-type: inline-size;
  display: flex;
  align-items: flex-end;
  gap: 1.5rem;
  overflow-x: auto;
  padding: 2.75rem 2rem 2.25rem;
  background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1.5px);
  background-size: 22px 22px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .3) transparent
}

.board {
  flex: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .75rem
}

.board:first-child {
  margin-left: auto
}

.board:last-child {
  margin-right: auto
}

.board-name {
  display: grid;
  gap: .35rem;
  font: 500 .75rem/1 var(--mono);
  color: var(--white);
  white-space: nowrap
}

.board-name span {
  font-size: .6875rem;
  color: var(--white);
  opacity: .6
}

.board>svg,
.board img {
  width: calc(var(--w) * .15px);
  width: clamp(calc(var(--w) * .095px), calc(var(--w) / 5760 * (100cqi - 6rem - 4px)), calc(var(--w) * .2px));
  height: auto;
  aspect-ratio: var(--w) / var(--h);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .15), 0 24px 44px -16px rgba(0, 0, 0, .9)
}

.board a {
  display: block;
  border-radius: 3px
}

.board img {
  display: block;
  object-fit: cover;
  transition: transform .2s ease
}

.board a:hover img {
  transform: translateY(-3px)
}

.defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden
}

.caption {
  width: var(--column);
  margin: 1.25rem auto 0;
  text-align: center;
  font-size: .9375rem
}

.layer {
  transform-box: view-box;
  transform-origin: 0 0;
  transform: translate(calc(var(--fx) * 1px), calc(var(--fy) * 1px)) scale(var(--fs));
  animation: relayout 1.15s cubic-bezier(.22, .7, .12, 1) both;
  animation-delay: calc(.5s + var(--i) * .09s)
}

.layer.still {
  animation: none
}

@keyframes relayout {
  from {
    transform: translate(calc(var(--cx) * 1px), calc(var(--cy) * 1px)) scale(var(--cs))
  }
}

.selection {
  opacity: 0;
  animation: appear .35s ease-out 2s forwards
}

@keyframes appear {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@media (max-width:560px) {
  .studio-chip {
    display: none
  }

  .boards {
    padding: 2rem 1.25rem 1.5rem;
    gap: 1rem
  }
}

/* ---------- home: sections ---------- */
.section {
  width: var(--column);
  margin: 0 auto;
  padding-top: clamp(4.5rem, 10vw, 7.5rem)
}

.section-head {
  max-width: 44rem;
  margin: 0 0 clamp(2rem, 4vw, 3rem)
}

.section h2,
.files h2,
.cta h2 {
  margin: 0;
  font: 700 clamp(2rem, 4.4vw, 3.25rem)/1.03 var(--display);
  letter-spacing: -.035em;
  text-wrap: balance
}

.section-head p {
  margin: 1rem 0 0;
  font-size: 1.125rem
}

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem
}

.step {
  position: relative;
  counter-increment: step;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1.6rem 1.5rem 1.75rem;
  border-radius: var(--radius);
  background: var(--white);
  color: var(--black);
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease
}

.step:nth-child(even) {
  background: var(--black);
  color: var(--white)
}

.step:nth-child(even) .icon {
  background: var(--white);
  color: var(--black)
}

.step:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 50px -28px rgba(0, 0, 0, .6)
}

.step::after {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 1.35rem;
  right: 1.4rem;
  font: 700 2.5rem/1 var(--display);
  letter-spacing: -.05em
}

.step .icon {
  margin-bottom: 1rem
}

.step h3 {
  margin: 0;
  font: 700 1.25rem/1.2 var(--display);
  letter-spacing: -.02em
}

.step p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6
}

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem
}

.panel {
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--black);
  box-shadow: var(--shadow)
}

.panel-check {
  background: var(--black);
  color: var(--white)
}

.panel h3 {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin: 0 0 1.5rem;
  font: 700 clamp(1.375rem, 2.4vw, 1.75rem)/1.15 var(--display);
  letter-spacing: -.025em
}

.panel h3 .icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px
}

.panel h3 .icon svg {
  width: 1.3rem;
  height: 1.3rem
}

.panel-check .icon {
  background: var(--white);
  color: var(--black)
}

.ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem
}

.ticks li {
  position: relative;
  padding-left: 2.25rem;
  max-width: 34rem;
  font-size: 1.0313rem
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .1rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--black) var(--tick-white) center/.9rem no-repeat
}

.panel-check .ticks li::before {
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M12 5.5v8'/%3E%3Cpath d='M12 18.6h.01'/%3E%3C/svg%3E") center/.9rem no-repeat
}

.ticks strong {
  font-family: var(--display);
  font-weight: 700
}

.files {
  width: var(--column);
  margin: clamp(4.5rem, 10vw, 7.5rem) auto 0;
  border-radius: 32px;
  background: var(--black);
  color: var(--white);
  box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .9)
}

.files-inner {
  padding: clamp(2.25rem, 6vw, 4.5rem)
}

.files .kicker::before {
  background: var(--white);
  animation: none
}

.facts {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem
}

.fact {
  padding: 1.5rem 1.4rem 1.6rem;
  border-radius: 20px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14)
}

.fact .icon {
  background: var(--white);
  color: var(--black)
}

.fact dt {
  margin: 0 0 .5rem;
  font: 700 1.125rem/1.3 var(--display);
  letter-spacing: -.01em
}

.fact dt .icon {
  margin-bottom: 1.15rem
}

.fact dd {
  margin: 0;
  font-size: .975rem;
  line-height: 1.6;
  color: var(--white)
}

.files .more {
  margin: 2.25rem 0 0;
  font-family: var(--display)
}

.files .more a {
  color: var(--white);
  font-weight: 700;
  text-decoration-thickness: 2px
}

.cta {
  width: var(--column);
  margin: 0 auto;
  padding-top: clamp(4.5rem, 10vw, 7rem)
}

.cta-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.75rem 2.5rem;
  padding: clamp(2.25rem, 5.5vw, 4rem);
  border-radius: 32px;
  background: var(--white);
  color: var(--black);
  box-shadow: var(--shadow)
}

.cta-panel::before,
.cta-panel::after {
  content: "";
  position: absolute;
  z-index: -1;
  border: 2px solid rgba(0, 0, 0, .14);
  border-radius: 14px;
  pointer-events: none
}

.cta-panel::before {
  width: 9rem;
  height: 16rem;
  right: 12%;
  top: -4.5rem;
  transform: rotate(14deg)
}

.cta-panel::after {
  width: 15rem;
  height: 7.85rem;
  right: -3rem;
  bottom: -2.5rem;
  transform: rotate(-10deg);
  background: rgba(0, 0, 0, .04)
}

.cta-panel>div {
  max-width: 36rem
}

.cta h2 {
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  line-height: 1;
  letter-spacing: -.04em
}

.cta p {
  margin: .85rem 0 0;
  font-size: 1.0625rem
}

.cta .button {
  flex: none
}

@media (max-width:1080px) {

  .steps,
  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .step:nth-child(even) {
    background: var(--white);
    color: var(--black)
  }

  .step:nth-child(even) .icon {
    background: var(--black);
    color: var(--white)
  }

  .step:nth-child(2),
  .step:nth-child(3) {
    background: var(--black);
    color: var(--white)
  }

  .step:nth-child(2) .icon,
  .step:nth-child(3) .icon {
    background: var(--white);
    color: var(--black)
  }
}

@media (max-width:640px) {

  .steps,
  .split,
  .facts {
    grid-template-columns: 1fr
  }

  .step:nth-child(n) {
    background: var(--white);
    color: var(--black)
  }

  .step:nth-child(n) .icon {
    background: var(--black);
    color: var(--white)
  }

  .step:nth-child(even) {
    background: var(--black);
    color: var(--white)
  }

  .step:nth-child(even) .icon {
    background: var(--white);
    color: var(--black)
  }

  .cta-panel::before {
    display: none
  }

  .cta-panel::after {
    width: 9rem;
    height: 4.7rem;
    right: -1.5rem;
    bottom: -1.25rem
  }

  .perks {
    flex-direction: column;
    align-items: flex-start;
    gap: .55rem;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto
  }

  .perks li {
    text-align: left
  }
}

/* ---------- examples page: one big card per example, black and white in turn ---------- */
.gallery {
  width: var(--column);
  margin: 0 auto;
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem)
}

.example {
  border-radius: 28px;
  overflow: hidden;
  background: var(--black);
  color: var(--white);
  box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .85)
}

.example-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, .12)
}

.example-bar h2 {
  margin: 0;
  min-width: 0;
  font: 700 clamp(1.125rem, 2vw, 1.5rem)/1.2 var(--display);
  letter-spacing: -.02em
}

.example-chip {
  margin-left: auto;
  flex: none;
  padding: .4rem .7rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .35);
  font: 500 .8125rem/1 var(--mono)
}

.example-light {
  background: var(--white);
  color: var(--black);
  box-shadow: var(--shadow)
}

.example-light .example-bar {
  border-bottom-color: rgba(0, 0, 0, .1)
}

.example-light .example-chip {
  border-color: rgba(0, 0, 0, .3)
}

.example-light .studio-dots i {
  background: var(--black)
}

.example-light .studio-dots i:nth-child(2) {
  background: #7a7a7a
}

.example-light .studio-dots i:nth-child(3) {
  background: #c4c4c4
}

.example-light .boards {
  background-image: radial-gradient(rgba(0, 0, 0, .12) 1px, transparent 1.5px);
  scrollbar-color: rgba(0, 0, 0, .3) transparent
}

.example-light .board-name,
.example-light .board-name span {
  color: var(--black)
}

.example-light .board img {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 24px 44px -20px rgba(0, 0, 0, .45)
}

.example .board:focus-within img {
  outline: 3px solid currentColor;
  outline-offset: 3px
}

.example-chip+.example-edit {
  margin-left: .25rem
}

.example-edit {
  flex: none;
  min-height: 2.4rem;
  padding: .55rem 1rem;
  font-size: .9375rem;
  color: var(--black);
  background: var(--white);
  border-color: var(--white)
}

.example-light .example-edit {
  color: var(--white);
  background: var(--black);
  border-color: var(--black)
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap
}

@media (max-width:560px) {
  .example-bar {
    padding: .85rem 1rem;
    flex-wrap: wrap
  }

  .example-bar .studio-dots {
    display: none
  }

  .example-edit {
    margin-left: 0;
    order: 3
  }
}

/* ---------- legal documents ---------- */
.page-head {
  position: relative;
  padding: clamp(2.75rem, 7vw, 4.75rem) max(var(--gutter), calc((100% - var(--wide)) / 2)) clamp(2rem, 4vw, 3rem)
}

.page-head h1 {
  margin: 0;
  font: 700 clamp(2.5rem, 6.5vw, 4.75rem)/.98 var(--display);
  letter-spacing: -.045em
}

.page-head .meta {
  margin: 1rem 0 0;
  font: 400 1rem/1.5 var(--display)
}

.review {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  max-width: 46rem;
  margin: 1.5rem 0 0;
  padding: .95rem 1.2rem;
  border-radius: 16px;
  background: var(--black);
  color: var(--white);
  font-size: .975rem;
  line-height: 1.55
}

.review::before {
  content: "i";
  flex: none;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--white);
  color: var(--black);
  font: 700 .875rem/1 var(--display)
}

.legal {
  width: var(--column);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start
}

.toc {
  position: sticky;
  top: 5.75rem;
  max-height: calc(100vh - 7rem);
  overflow: auto;
  padding: 1.1rem .75rem;
  border-radius: 20px;
  background: var(--white);
  box-shadow: var(--shadow);
  font: 400 .9375rem/1.35 var(--display)
}

.toc::before {
  content: "On this page";
  display: block;
  margin: 0 0 .6rem .55rem;
  font: 700 .75rem/1 var(--display);
  letter-spacing: .09em;
  text-transform: uppercase
}

.toc ol {
  list-style: none;
  margin: 0;
  padding: 0
}

.toc a {
  display: block;
  padding: .42rem .55rem;
  border-radius: 10px;
  color: var(--black);
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease
}

.toc a:hover {
  background: var(--black);
  color: var(--white)
}

.doc {
  position: relative;
  max-width: 54rem;
  padding: clamp(1.5rem, 5vw, 3.75rem);
  border-radius: 28px;
  background: var(--white);
  color: var(--black);
  box-shadow: var(--shadow);
  overflow: hidden
}

.doc::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: var(--black)
}

.summary {
  margin: 0 0 3rem;
  padding: 1.5rem 1.75rem;
  border-radius: 20px;
  background: var(--black);
  color: var(--white)
}

.summary h2 {
  margin: 0 0 .75rem;
  font: 700 1.25rem/1.2 var(--display);
  letter-spacing: -.015em
}

.summary ul {
  margin: 0;
  padding-left: 1.15em
}

.summary li {
  margin: 0 0 .45rem
}

.doc section h2 {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  margin: 3rem 0 1rem;
  font: 700 clamp(1.375rem, 2.4vw, 1.75rem)/1.2 var(--display);
  letter-spacing: -.025em
}

.doc section h2::before {
  content: "";
  flex: none;
  width: .55em;
  height: .55em;
  border-radius: .16em;
  background: var(--black)
}

.doc h3 {
  margin: 2rem 0 .5rem;
  font: 700 1.125rem/1.3 var(--display)
}

.doc p,
.doc li {
  max-width: 68ch;
  line-height: 1.7
}

.doc p {
  margin: 0 0 1rem
}

.doc ul {
  margin: 0 0 1rem;
  padding-left: 1.2em
}

.doc li {
  margin: 0 0 .5rem
}

.doc code {
  font: 500 .875em/1 var(--mono);
  padding: .2em .45em;
  border-radius: 6px;
  background: var(--black);
  color: var(--white)
}

.doc dl {
  display: grid;
  grid-template-columns: minmax(9rem, 15rem) minmax(0, 1fr);
  margin: 0 0 1rem;
  border: 1px solid var(--black);
  border-radius: 16px;
  overflow: hidden
}

.doc dt,
.doc dd {
  margin: 0;
  padding: .9rem 1.1rem;
  border-top: 1px solid var(--line)
}

.doc dt {
  font: 700 1rem/1.45 var(--display);
  background: var(--black);
  color: var(--white);
  border-top-color: rgba(255, 255, 255, .18)
}

.doc dd {
  line-height: 1.6
}

.doc dt:first-of-type,
.doc dd:first-of-type {
  border-top: 0
}

.notice {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  margin: 0 0 1.25rem;
  padding: 1rem 1.2rem;
  border-radius: 16px;
  background: var(--black);
  color: var(--white)
}

.notice::before {
  content: "";
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--white) var(--tick) center/.9rem no-repeat
}

.withdraw {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin: 1.25rem 0 0
}

.withdraw .button {
  color: var(--black);
  background: var(--white)
}

.withdraw .button:hover {
  color: var(--white);
  background: var(--black)
}

@media (max-width:960px) {
  .legal {
    grid-template-columns: 1fr;
    gap: 1.5rem
  }

  .toc {
    position: static;
    max-height: none
  }

  .toc ol {
    columns: 2;
    column-gap: 1rem
  }

  .toc li {
    break-inside: avoid
  }
}

@media (max-width:640px) {
  .toc ol {
    columns: 1
  }

  .doc dl {
    grid-template-columns: 1fr
  }

  .doc dd {
    border-top: 0
  }
}

/* ---------- not found ---------- */
.lost {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 3rem var(--gutter);
  text-align: center
}

.lost::before {
  content: "404";
  display: block;
  margin: 0 0 1rem;
  font: 700 clamp(6rem, 24vw, 13rem)/.85 var(--display);
  letter-spacing: -.06em
}

.lost h1 {
  margin: 0;
  font: 700 clamp(2rem, 5vw, 3rem)/1 var(--display);
  letter-spacing: -.035em
}

.lost p {
  margin: .85rem 0 0
}

.lost p:last-child {
  margin-top: 1.75rem
}

/* Without site.js, iPhone and iPad Safari can't pin the text fill (they draw
   "fixed" backgrounds as if they scrolled). There the black blob sits at the
   far right edge and text on the glaze stays black. */
@supports (-webkit-touch-callout:none) {

  html:not(.glaze-js) body::before,
  html:not(.glaze-js) .site-header {
    --bx: 112%;
    --by: 22%;
    animation: none
  }

  html:not(.glaze-js) :is(.wordmark, .site-nav a:not(.button), .hero h1, .hero h1 .picked, .hero .lead, .text-link, .perks li, .caption,
    .section .section-head > *, .site-footer p, .site-footer a, .page-head h1, .page-head .meta, .page-head .kicker,
    .lost h1, .lost p:not(:last-child), .lost::before) {
    background: none;
    color: var(--black);
    animation: none
  }
}

@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }

  *,
  *::before,
  *::after {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important
  }

  .step,
  .button {
    transition: none
  }
}
/* ---------- home: the demo (a real example played through, scene by scene) ---------- */
/* Unstyled decorative app panels must not spill full-size layer images into the demo. */
.demo .app-chrome{display:none}
.demo-stage{position:relative;min-height:clamp(21rem,38vw,30rem);transition:background-color .6s ease}
.demo .boards{position:absolute;inset:0;transition:opacity .5s ease,transform .6s ease,background-color .6s ease}
.board-art{position:relative;width:calc(var(--w) * .15px);width:clamp(calc(var(--w) * .095px),calc(var(--w) / 5760 * (100cqi - 6rem - 4px)),calc(var(--w) * .2px));aspect-ratio:var(--w) / var(--h)}
.board-art img{display:block;width:100%;height:100%;object-fit:cover;border-radius:3px;box-shadow:0 0 0 1px rgba(255,255,255,.15),0 24px 44px -16px rgba(0,0,0,.9)}
.demo.replay .board{animation:grow .8s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * .13s)}
@keyframes grow{from{opacity:0;transform:scale(.4) translateY(2rem)}}
.studio-app{display:none;flex:none;padding:.4rem .7rem;border-radius:999px;background:var(--white);color:var(--black);font:700 .75rem/1 var(--display)}
.studio-app:not(:empty){display:inline-block}
.scene{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.25rem;padding:1.5rem;
  opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s .5s}
.demo[data-scene="drop"] .scene-drop,.demo[data-scene="layers"] .scene-layers,.demo[data-scene="gallery"] .scene-gallery{opacity:1;visibility:visible;transition-delay:0s}
.demo:is([data-scene="drop"],[data-scene="layers"]) .boards{opacity:0;pointer-events:none}
.demo[data-scene="gallery"] .boards{opacity:.12;transform:scale(.9)}
.scene-note{margin:0;max-width:32rem;text-align:center;font:400 .9375rem/1.4 var(--display);color:rgba(255,255,255,.75)}
.scene-hint{position:absolute;left:50%;top:1rem;translate:-50% 0;padding:.5rem .9rem;border-radius:999px;background:var(--white);color:var(--black);
  font:600 .8125rem/1 var(--display);opacity:0;transition:opacity .4s;pointer-events:none;white-space:nowrap;max-width:calc(100% - 2rem);overflow:hidden;text-overflow:ellipsis}
.scene-hint:not(:empty){opacity:1}
.demo:is([data-scene="figma"],[data-scene="illustrator"]) .scene-hint{background:var(--black);color:var(--white)}
/* drop: the original file falls into the zone */
.drop-zone{display:flex;flex-direction:column;align-items:center;gap:1.1rem;width:min(26rem,100%);padding:2rem;border:2px dashed rgba(255,255,255,.45);border-radius:24px}
.drop-zone p{margin:0;font:700 1.125rem/1.2 var(--display)}
.drop-file{display:flex;flex-direction:column;align-items:center;gap:.5rem;font:500 .8125rem/1 var(--mono);animation:drop-in 2.6s cubic-bezier(.3,.7,.2,1) infinite}
.drop-file img{width:clamp(6rem,12vw,9rem);height:auto;border-radius:6px;box-shadow:0 20px 40px -18px #000}
@keyframes drop-in{0%{translate:0 -5rem;opacity:0;scale:.9}25%,85%{translate:0 0;opacity:1;scale:1}100%{translate:0 .4rem;opacity:0}}
/* layers: real layers fan out */
.layer-fan{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem}
.layer-card{width:clamp(4.5rem,9vw,7.5rem);aspect-ratio:1;object-fit:contain;border-radius:6px;padding:.4rem;
  background:repeating-conic-gradient(#2a2a2a 0 25%,#1c1c1c 0 50%) 0 0/14px 14px;box-shadow:0 0 0 1px rgba(255,255,255,.18),0 18px 30px -18px #000;
  animation:fan 1s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--n) * .12s)}
@keyframes fan{from{translate:calc((2.5 - var(--n)) * 3rem) 0;opacity:0;scale:.7}}
/* edit: a selection box nudges a layer on the story size */
.edit-box{position:absolute;left:8%;top:14%;width:72%;height:16%;border:2px solid var(--white);outline:1px solid var(--black);opacity:0;transition:opacity .3s}
.edit-box i{position:absolute;width:9px;height:9px;background:var(--white);border:1.5px solid var(--black)}
.edit-box i:nth-child(1){left:-5px;top:-5px}.edit-box i:nth-child(2){right:-5px;top:-5px}.edit-box i:nth-child(3){left:-5px;bottom:-5px}.edit-box i:nth-child(4){right:-5px;bottom:-5px}
.demo[data-scene="edit"] .edit-box{opacity:1;animation:nudge 2.4s cubic-bezier(.4,0,.2,1) .4s both}
@keyframes nudge{0%,20%{translate:0 0}60%,100%{translate:6% 18%}}
/* figma / photoshop / illustrator: the workspace around the sizes changes and each size gets a label */
.board-tag{display:none;align-self:flex-start;padding:.35rem .6rem;border-radius:8px;background:var(--white);color:var(--black);font:500 .6875rem/1.2 var(--display);
  box-shadow:0 8px 18px -10px rgba(0,0,0,.6);animation:rise .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.2s + var(--i) * .1s)}
.board-tag b{display:block;font-size:.75rem;margin-bottom:.15rem}
@keyframes rise{from{translate:0 1rem;opacity:0}}
.demo:is([data-scene="figma"],[data-scene="photoshop"],[data-scene="illustrator"]) .board-tag{display:block}
.demo[data-scene="figma"] .demo-stage{background:#f0f0f0}
.demo[data-scene="figma"] .boards{background-image:linear-gradient(rgba(0,0,0,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.08) 1px,transparent 1px);background-size:24px 24px}
.demo:is([data-scene="figma"],[data-scene="illustrator"]) .board-name,.demo:is([data-scene="figma"],[data-scene="illustrator"]) .board-name span{color:var(--black)}
.demo:is([data-scene="figma"],[data-scene="illustrator"]) .board-tag{background:var(--black);color:var(--white)}
.demo[data-scene="figma"] .board-art img{box-shadow:0 0 0 1px rgba(0,0,0,.1),0 24px 44px -20px rgba(0,0,0,.45)}
.demo[data-scene="photoshop"] .demo-stage{background:#1e1e1e}
.demo[data-scene="photoshop"] .boards{background-image:repeating-conic-gradient(#2a2a2a 0 25%,#232323 0 50%);background-size:18px 18px}
.demo[data-scene="illustrator"] .demo-stage{background:#f7f7f7}
.demo[data-scene="illustrator"] .boards{background-image:none}
.demo[data-scene="illustrator"] .board-art img{outline:1px solid var(--black);outline-offset:3px;box-shadow:none;border-radius:0}
/* gallery */
.scene-gallery{justify-content:space-between;padding:1.25rem 1.5rem}
.demo-thumbs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.75rem;width:100%;max-width:56rem}
.demo-thumb{display:block;border-radius:6px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.15),0 20px 40px -20px #000;animation:rise .6s cubic-bezier(.2,.7,.2,1) both}
.demo-thumb:nth-child(2){animation-delay:.08s}.demo-thumb:nth-child(3){animation-delay:.16s}.demo-thumb:nth-child(4){animation-delay:.24s}.demo-thumb:nth-child(5){animation-delay:.32s}
.demo-thumb img{display:block;width:100%;height:auto;transition:transform .2s}
.demo-thumb:hover img{transform:scale(1.04)}
/* step buttons */
.demo-steps{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem .6rem;counter-reset:scene}
.demo-steps button{counter-increment:scene;display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .85rem;border-radius:999px;border:1.5px solid rgba(0,0,0,.25);
  background:transparent;color:var(--black);font:600 .8125rem/1 var(--display);cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.demo-steps button::before{content:counter(scene);display:grid;place-items:center;width:1.25rem;height:1.25rem;border-radius:50%;background:var(--black);color:var(--white);font-size:.6875rem}
.demo-steps button.active{background:var(--black);color:var(--white);border-color:var(--black)}
.demo-steps button.active::before{background:var(--white);color:var(--black)}
@media (max-width:720px){.demo-thumbs{grid-template-columns:repeat(3,minmax(0,1fr))}.demo-thumb:nth-child(n+4){display:none}.board-tag{font-size:.625rem}}
@media (prefers-reduced-motion:reduce){.drop-file,.layer-card,.demo-thumb,.board-tag,.demo.replay .board,.demo[data-scene="edit"] .edit-box{animation:none}}

/* step cards: icon left, number right, in one row so they can never overlap */
.step{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;column-gap:.75rem}
.step::before{content:counter(step,decimal-leading-zero);grid-column:2;grid-row:1;font:700 2.5rem/1 var(--display);letter-spacing:-.05em}
.step::after{content:none}
.step .icon{grid-column:1;grid-row:1}
.step h3,.step p{grid-column:1 / -1}