.mark .q {
  color: #111;
}
.hero .wrap {
  padding-top: 152px;
}
.hero h1 {
  margin: 0;
  font-size: 46px;
  line-height: 1.08;
  letter-spacing: -.015em;
  font-weight: 400;
  max-width: 760px;
  color: var(--char);
}
.hero .lede {
  margin: 22px 0 0;
  font-size: 20px;
  line-height: 1.5;
  color: #3a3540;
  max-width: 640px;
}
.labhero {
  padding-top: 88px;
}
#bwat > .eb {
  margin-top: 0 !important;
}
.frame {
  position: relative;
  margin-top: 32px;
  border-radius: 16px;
  overflow: hidden;
  background: #2b3a33;
  transition: background-color .6s ease;
}
.frame .stage {
  height: auto;
  aspect-ratio: 16/9;
  margin: 0 !important;
  border-radius: 0;
  --rt:0px;
  --rb:0px;
  --gx:clamp(12px,3vw,40px);
  --gy:clamp(10px,2.4vw,30px);
  --capB:10px;
  --capF:clamp(14px,2.2vw,26px);
  --capH:calc(var(--capF) * 1.6);
}
.frame .stage[hidden] {
  display: none !important;
}
@media (max-width:760px) {
  .frame .stage {
    aspect-ratio: 3/4;
  }
  .frame {
    margin-left: calc(-1 * max(36px, env(safe-area-inset-left, 0px)));
    margin-right: calc(-1 * max(36px, env(safe-area-inset-right, 0px)));
    border-radius: 0;
  }
  .gterm {
    border-radius: 10px;
  }
}
.frame .stage .scue,
.frame .stage .rrow,
.frame .stage .en,
.frame .stage .fl {
  display: none !important;
}
.stage .zc-stage .zc-hot {
  animation-name: none !important;
  border-color: #5c5563;
  color: #2b2630;
  background: #fff;
}
.stage .zc-stage .zc-sent {
  display: none !important;
}
.frame .bwrap {
  margin: 0;
}
.frame .bw {
  border: 0;
  border-radius: 0;
}
.frame:not(.s-board) .bwrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  transform-origin: 0 0;
}
.frame.s-board {
  background: #f1f4f6;
}
.frame.s-move .bwrap {
  transition: transform .9s cubic-bezier(.65, 0, .35, 1), opacity .45s ease .3s;
}
.frame.s-move .stage {
  opacity: 0;
  transition: opacity .6s ease;
}
.frame.s-move {
  background: #f1f4f6;
  transition: height .9s cubic-bezier(.65, 0, .35, 1), background-color .6s ease .2s;
}
.bw.guided .bw-seg > span {
  padding: 5px 11px;
  border-radius: 7px;
  font-size: 13px;
  color: #8a8290;
}
.bw.guided .bw-seg > span.on {
  background: #fff;
  color: #4a4450;
  box-shadow: 0 0 0 1px #ddd5c8;
}
.bw-guide {
  margin: 0 2px 14px;
  min-height: 20px;
  font: 500 13px/20px var(--sans);
  color: var(--sf-accent);
}
.bw-card.dim {
  opacity: .5;
}
.bw-card.dim .c-main {
  cursor: default;
}
.send-session-row .send-session {
  width: 100%;
}
.gterm {
  margin-top: 16px;
  border-radius: 12px;
  overflow: hidden;
  background: #161616;
  color: #ececec;
  font:
    400 14px/1.7 "JetBrains Mono",
    ui-monospace,
    Menlo,
    monospace;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .4s ease, transform .4s ease;
}
.gterm.in {
  opacity: 1;
  transform: none;
}
.gt-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  background: #232323;
  font-size: 12px;
  color: #a9a9a9;
}
.gt-bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #444;
}
.gt-bar b {
  margin-left: 8px;
  font-weight: 500;
  color: #ececec;
}
.gt-body {
  padding: 12px 16px 14px;
  min-height: calc(4 * 1.7em);
}
.gt-body p {
  margin: 0;
  opacity: 0;
  transition: opacity .3s ease;
}
.gt-body p.in {
  opacity: 1;
}
.gt-body .o {
  color: #ff8a66;
}
.gt-body .ok {
  color: #7fd19b;
}
.gt-body .d {
  color: #e0b35a;
}
.frow {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  min-height: 26px;
}
.ft .copy .ig {
  display: inline-flex;
  color: inherit;
}
.ft .copy .ig svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}
.ft .copy .ig circle:last-child {
  fill: currentColor;
  stroke: none;
}
@media (max-width:900px) {
  .hero .wrap {
    padding-top: 112px;
  }
  .hero h1 {
    font-size: 34px;
  }
  .hero .lede {
    font-size: 18px;
  }
  .labhero {
    padding-top: 64px;
  }
}
@media (prefers-reduced-motion:reduce) {
  .gterm,
  .gt-body p {
    transition: none;
  }
}
.frow .wbtn {
  border-color: #c9c2b5;
  color: #5c5563;
}
.frow .wbtn:hover {
  border-color: var(--char);
  color: var(--char);
}
.bw.guided .bw-card .c-t:after {
  display: none;
}
.frame .stage .zc-panel {
  background: #f1f4f6;
  color: #2a2b2d;
}
.frame .stage .zc-brand {
  color: #2a2b2d;
}
.frame .stage .zc-meta {
  color: #686f79;
  border-bottom: calc(1 * var(--u)) solid #dfe3e8;
}
.frame .stage .zc-meta b {
  background: #fff;
  color: #2a2b2d;
  border: calc(1 * var(--u)) solid #d3d9e0;
  font-weight: 600;
}
.frame .stage .zc-meta b:before {
  background: #da1639;
  width: calc(7 * var(--u));
  height: calc(7 * var(--u));
}
.frame .stage .zc-seg {
  background: #e4e8ed;
  border: 0;
  padding: calc(2 * var(--u));
  border-radius: calc(9 * var(--u));
}
.frame .stage .zc-seg span {
  color: #686f79;
  font-weight: 600;
}
.frame .stage .zc-seg .zc-on {
  background: #fff;
  color: #2a2b2d;
  box-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) #1d21291f;
}
.frame .stage .zc-col {
  background: transparent;
  padding: 0;
  border-radius: 0;
}
.frame .stage .zc-col h4 {
  color: #0d6bde;
  font-weight: 700;
  padding-bottom: calc(7 * var(--u));
  border-bottom: calc(1 * var(--u)) solid #dfe3e8;
  margin-bottom: calc(4 * var(--u));
}
.frame .stage .zc-card {
  border: 0;
  border-radius: calc(12 * var(--u));
  background: #fff;
  color: #2a2b2d;
}
.frame .stage .zc-t {
  font-weight: 500;
  color: #2a2b2d;
}
.frame .stage .zc-dots {
  color: #0d6bde;
  opacity: .75;
}
.frame .stage .zc-id {
  color: #8e9194;
}
.frame .stage .zc-id:before {
  background: #8e9194;
}
.frame .stage .zc-who {
  border-top: 0;
  color: #686f79;
}
.frame .stage .zc-stage .zc-hot {
  border-color: #0d6bde;
  background: #0d6bde;
  color: #fff;
  font-weight: 500;
}
@keyframes zc-c1 {
  0%, 15% {
    opacity: 0;
    transform: scale(.92);
    box-shadow: 0 0 0 0 rgba(13, 107, 222, 0);
  }
  16% {
    opacity: 1;
    transform: scale(1.06);
    box-shadow: 0 0 0 calc(8 * var(--u)) rgba(13, 107, 222, .45);
  }
  19%, 94% {
    opacity: 1;
    transform: none;
    box-shadow: 0 calc(1 * var(--u)) calc(1 * var(--u)) #1d21290a, 0 calc(2 * var(--u)) calc(10 * var(--u)) #1d21290d;
  }
  97%, 100% {
    opacity: 0;
    transform: scale(.92);
  }
}
@keyframes zc-c2 {
  0%, 51% {
    opacity: 0;
    transform: scale(.92);
    box-shadow: 0 0 0 0 rgba(13, 107, 222, 0);
  }
  52% {
    opacity: 1;
    transform: scale(1.06);
    box-shadow: 0 0 0 calc(8 * var(--u)) rgba(13, 107, 222, .45);
  }
  55%, 94% {
    opacity: 1;
    transform: none;
    box-shadow: 0 calc(1 * var(--u)) calc(1 * var(--u)) #1d21290a, 0 calc(2 * var(--u)) calc(10 * var(--u)) #1d21290d;
  }
  97%, 100% {
    opacity: 0;
    transform: scale(.92);
  }
}
@keyframes zc-c3 {
  0%, 75% {
    opacity: 0;
    transform: scale(.92);
    box-shadow: 0 0 0 0 rgba(13, 107, 222, 0);
  }
  76% {
    opacity: 1;
    transform: scale(1.06);
    box-shadow: 0 0 0 calc(8 * var(--u)) rgba(13, 107, 222, .45);
  }
  79%, 94% {
    opacity: 1;
    transform: none;
    box-shadow: 0 calc(1 * var(--u)) calc(1 * var(--u)) #1d21290a, 0 calc(2 * var(--u)) calc(10 * var(--u)) #1d21290d;
  }
  97%, 100% {
    opacity: 0;
    transform: scale(.92);
  }
}
.panel {
  background: #f3efe6;
  border-radius: 22px;
  padding: 56px;
  color: var(--char);
}
.panel .blede,
.panel .points p {
  color: #5c5563;
}
@media (max-width:900px) {
  .panel {
    padding: 32px 22px;
    border-radius: 16px;
  }
}
@media (max-width:760px) {
  .panel .frame {
    margin-left: -22px;
    margin-right: -22px;
  }
}
.bw.guided {
  position: relative;
}
.ghost {
  position: absolute;
  z-index: 5;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  pointer-events: none;
  opacity: 0;
  transition: transform 1.1s cubic-bezier(.45, 0, .2, 1), opacity .3s ease;
}
.ghost svg {
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 2px 3px #1d212940);
}
.ghost.tap svg {
  animation: ghosttap .45s ease;
}
@keyframes ghosttap {
  50% {
    transform: scale(.82);
  }
}
.ghost .rip {
  position: absolute;
  left: -10px;
  top: -10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #0d6bde;
  opacity: 0;
}
.ghost.tap .rip {
  animation: ghostrip .6s ease-out;
}
@keyframes ghostrip {
  0% {
    opacity: .8;
    transform: scale(.4);
  }
  100% {
    opacity: 0;
    transform: scale(2.2);
  }
}
@media (prefers-reduced-motion:reduce) {
  .ghost {
    transition: none;
  }
  .ghost.tap svg,
  .ghost.tap .rip {
    animation: none;
  }
}
.frame .stage .zc-ctl {
  display: none;
}
.bw.guided .bw-guide {
  display: none;
}
.bw.guided {
  pointer-events: none;
  user-select: none;
}
.bw.guided .c-btn {
  display: inline-block;
}
.bw.guided .pick-dialog[open] {
  position: absolute;
  inset: auto;
  left: 50%;
  top: 84px;
  transform: translateX(-50%);
  margin: 0;
  z-index: 4;
}
.ghost {
  z-index: 6;
}
.frame .stage {
  --gx:0px;
  --gy:0px;
}
.frame .stage .zc-top .zc-title {
  font-size: max(12px, calc(17 * var(--u)));
}
.frame .stage .zc-tb {
  font-size: max(13px, calc(20 * var(--u)));
}
.frame .stage .zc-tag {
  font-size: max(11px, calc(15 * var(--u)));
}
.frame .stage .zc-sub {
  font-size: max(10px, calc(15 * var(--u)));
}
.frame .stage .zc-brand {
  font-size: max(14px, calc(24 * var(--u)));
}
.frame .stage .zc-meta,
.frame .stage .zc-seg span {
  font-size: max(11px, calc(14 * var(--u)));
}
.frame .stage .zc-col h4 {
  font-size: max(12px, calc(18 * var(--u)));
}
.frame .stage .zc-t {
  font-size: max(12px, calc(15 * var(--u)));
}
.frame .stage .zc-id {
  font-size: max(10px, calc(14 * var(--u)));
}
.frame .stage .zc-who {
  font-size: max(11px, calc(14 * var(--u)));
}
.frame .stage .zc-btn {
  font-size: max(11px, calc(13 * var(--u)));
}
@keyframes zc-s1-ring {
  0%, 5% {
    border-color: #f4f1e8;
    border-width: max(1px, calc(1.5 * var(--u)));
  }
  6%, 38% {
    border-color: #ff582e;
    border-width: max(3px, calc(4 * var(--u)));
  }
  40%, 100% {
    border-color: #f4f1e8;
    border-width: max(1px, calc(1.5 * var(--u)));
  }
}
@keyframes zc-s3-ring {
  0%, 41% {
    border-color: #f4f1e8;
    border-width: max(1px, calc(1.5 * var(--u)));
  }
  42%, 63% {
    border-color: #ff582e;
    border-width: max(3px, calc(4 * var(--u)));
  }
  65%, 100% {
    border-color: #f4f1e8;
    border-width: max(1px, calc(1.5 * var(--u)));
  }
}
@keyframes zc-s2-ring {
  0%, 65% {
    border-color: #f4f1e8;
    border-width: max(1px, calc(1.5 * var(--u)));
  }
  66%, 88% {
    border-color: #ff582e;
    border-width: max(3px, calc(4 * var(--u)));
  }
  90%, 100% {
    border-color: #f4f1e8;
    border-width: max(1px, calc(1.5 * var(--u)));
  }
}
@media (max-width:760px) {
  .frame .stage {
    aspect-ratio: 9/16;
  }
}
@container (max-aspect-ratio: 11/10) {
  .frame .stage .zc-col {
    min-height: calc(140 * var(--u));
  }
}
.eb {
  font: 500 13px/1.3 var(--sans);
  letter-spacing: 0;
  text-transform: none;
}
.eb .pname {
  text-transform: none;
  letter-spacing: .01em;
}
.fine {
  font: 400 13px/1.5 var(--sans);
  letter-spacing: 0;
}
.bw-toast {
  font: 400 12px/1.5 var(--sans);
}
#bwat .bh {
  font-size: 32px;
}
.hero h1,
#bwat .bh,
.kblock .install .ih,
.points p b {
  color: #2b2630;
}
.hero .lede,
.blede,
.panel .blede,
.kblock .install .isay,
.points p,
.panel .points p,
.kblock .kmail {
  color: #5c5563;
}
.eb,
.fine,
footer.ft .copy {
  color: #8a8290;
}
.kblock .kmail a {
  color: #2b2630;
}
.install pre,
#close .copy {
  background: #161616;
}
.labhero {
  padding-top: 96px;
}
#bwat .bh {
  margin: 0 0 16px;
}
#bwat .points {
  margin-top: 32px;
  gap: 32px;
}
.kblock {
  margin-top: 64px;
}
@media (max-width:900px) {
  .labhero {
    padding-top: 64px;
  }
}
.frame .stage .zc-bot svg circle:first-of-type,
.frame .stage .zc-brand svg circle:first-of-type {
  fill: none;
}
.frame .stage .zc-bot svg path:first-of-type,
.frame .stage .zc-brand svg path:first-of-type {
  fill: #f15a36;
  stroke: #f15a36;
  stroke-width: 1.4;
}
.frame .stage .zc-bot svg path:last-of-type,
.frame .stage .zc-brand svg path:last-of-type {
  fill: #fff;
}
.frame .stage .zc-bot svg circle:last-of-type {
  fill: #262626;
}
.frame .stage .zc-brand svg circle:last-of-type {
  fill: #2b3a33;
}
.frame .stage .zc-cols {
  align-items: stretch;
}
.labhero {
  padding-top: 56px;
}
@media (max-width:900px) {
  .labhero {
    padding-top: 40px;
  }
}
.frame .stage .wl .cap {
  visibility: hidden;
}
.frow {
  display: none;
}
.frame .stage {
  --capB:0px;
  --capH:0px;
}
#bwat .points {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid #e2dbcf;
  gap: 40px;
}
#bwat .points p b {
  font-size: 17px;
  margin-bottom: 4px;
}
.kblock {
  margin-top: 96px;
}
@media (max-width:760px) {
  .kblock {
    margin-top: 64px;
  }
}
#close .copy {
  white-space: nowrap;
}
#close .copy.done {
  animation: cp-in .2s ease;
}
@keyframes cp-in {
  from {
    opacity: .3;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion:reduce) {
  #close .copy.done {
    animation: none;
  }
}
.frame > .pick-dialog[open] {
  position: absolute;
  inset: auto;
  left: 55%;
  top: 22%;
  transform: translateX(-50%);
  margin: 0;
  z-index: 7;
}
.frame > .ghost {
  z-index: 8;
}
.frame.s-zoom1 .zc-c2,
.frame.s-zoom1 .zc-c3 {
  filter: brightness(.55);
}
.frame .zc-who {
  position: relative;
}
.frame .zc-st {
  margin-left: auto;
  padding: 0 calc(7 * var(--u));
  border-radius: 999px;
  font:
    600 max(9px, calc(10 * var(--u)))/1.7 "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.frame .zc-st.q {
  background: #3a2e14;
  color: #e3b341;
}
.frame .zc-st.r {
  background: #23303c;
  color: #b7c9da;
}
.frame .zc-st.d {
  background: #1d2e26;
  color: #6db590;
}
.frame .zc-donebtn {
  background: transparent !important;
  border-color: #8fa9c2 !important;
  color: #dfe3e8 !important;
}
.frame .zc-isdone .zc-t {
  text-decoration: line-through;
  color: #737a86 !important;
}
.gterm[hidden] {
  display: block;
  visibility: hidden;
}
.gt-body {
  height: calc(4 * 1.7em);
  min-height: 0;
  box-sizing: content-box;
}
.gt-body p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}