:root {
  --icti-m03-green: #abd91a;
  --icti-m03-ink: #1d221d;
  --icti-m03-muted: #747a70;
  --icti-m03-faint: rgba(29, 34, 29, .13);
  --icti-m03-paper: #ffffff;
  --icti-m03-duration: 10s;
}

body[data-icti-motion03-preview="true"] {
  background: var(--icti-m03-paper);
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
}

.icti-motion03-standalone {
  display: grid;
  height: 100vh;
  place-items: center;
  width: 100vw;
}

.icti-motion03 {
  background: var(--icti-m03-paper);
  color: var(--icti-m03-ink);
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.icti-motion03-standalone > .icti-motion03 {
  height: 100vh;
  width: 100vw;
}

.icti-motion03__viewport {
  align-items: center;
  display: flex;
  inset: 0;
  justify-content: center;
  position: absolute;
}

.icti-m03,
.icti-motion03__final {
  aspect-ratio: 1;
  height: min(86%, 900px);
  left: 50%;
  object-fit: contain;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: auto;
}

.icti-m03 {
  overflow: visible;
  z-index: 1;
}

.icti-motion03__final {
  height: min(67.1%, 702px);
  opacity: 0;
  visibility: hidden;
  z-index: 2;
}

.icti-scene .icti-motion03__final {
  height: min(67.1%, 702px);
  width: auto;
}

.icti-m03__registration path,
.icti-m03__causality path,
.icti-m03__causality rect,
.icti-m03__causality circle {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.icti-m03__corner {
  stroke: var(--icti-m03-faint);
  stroke-linecap: square;
  stroke-width: 1.25;
}

.icti-m03__baseline {
  stroke: var(--icti-m03-faint);
  stroke-width: 1;
}

.icti-m03__sequence-image,
.icti-m03__build-image {
  image-rendering: auto;
}

.icti-m03__sequence-mask,
.icti-m03__build-mask {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

.icti-m03__lock {
  fill: var(--icti-m03-paper) !important;
  stroke: var(--icti-m03-green);
  stroke-width: 2;
}

.icti-m03__inherit {
  stroke: var(--icti-m03-muted);
  stroke-dasharray: 3 8;
  stroke-linecap: round;
  stroke-width: 1.4;
}

.icti-m03__measure {
  stroke: var(--icti-m03-green);
  stroke-linecap: round;
  stroke-width: 2;
}

.icti-m03__center-mark {
  stroke: var(--icti-m03-muted);
  stroke-width: 1.35;
}

.icti-m03__center-core {
  fill: var(--icti-m03-green) !important;
  stroke: none;
}

.icti-m03__build {
  opacity: 0;
}

.icti-motion03.is-playing .icti-m03 {
  animation: ictiM03Process var(--icti-m03-duration) linear 1 both;
}

.icti-motion03.is-playing .icti-motion03__final {
  animation: ictiM03Final var(--icti-m03-duration) linear 1 both;
}

.icti-motion03.is-playing .icti-m03__registration {
  animation: ictiM03Registration var(--icti-m03-duration) linear 1 both;
}

.icti-motion03.is-playing .icti-m03__sequence-mask--outer {
  animation: ictiM03SequenceOuter var(--icti-m03-duration) cubic-bezier(.2, .72, .2, 1) 1 both;
}

.icti-motion03.is-playing .icti-m03__sequence-mask--middle {
  animation: ictiM03SequenceMiddle var(--icti-m03-duration) cubic-bezier(.2, .72, .2, 1) 1 both;
}

.icti-motion03.is-playing .icti-m03__sequence-mask--inner {
  animation: ictiM03SequenceInner var(--icti-m03-duration) cubic-bezier(.2, .72, .2, 1) 1 both;
}

.icti-motion03.is-playing .icti-m03__handoff--one {
  animation: ictiM03HandoffOne var(--icti-m03-duration) linear 1 both;
}

.icti-motion03.is-playing .icti-m03__handoff--two {
  animation: ictiM03HandoffTwo var(--icti-m03-duration) linear 1 both;
}

.icti-motion03.is-playing .icti-m03__handoff--three {
  animation: ictiM03HandoffThree var(--icti-m03-duration) linear 1 both;
}

.icti-motion03.is-playing .icti-m03__handoff--one .icti-m03__inherit,
.icti-motion03.is-playing .icti-m03__handoff--one .icti-m03__measure {
  animation: ictiM03DrawHandoffOne var(--icti-m03-duration) linear 1 both;
}

.icti-motion03.is-playing .icti-m03__handoff--two .icti-m03__inherit,
.icti-motion03.is-playing .icti-m03__handoff--two .icti-m03__measure {
  animation: ictiM03DrawHandoffTwo var(--icti-m03-duration) linear 1 both;
}

.icti-motion03.is-playing .icti-m03__handoff--three .icti-m03__inherit,
.icti-motion03.is-playing .icti-m03__handoff--three .icti-m03__center-mark {
  animation: ictiM03DrawHandoffThree var(--icti-m03-duration) linear 1 both;
}

.icti-motion03.is-playing .icti-m03__handoff--three .icti-m03__center-core {
  animation: ictiM03CenterCore var(--icti-m03-duration) linear 1 both;
}

.icti-motion03.is-playing .icti-m03__build {
  animation: ictiM03BuildLayer var(--icti-m03-duration) linear 1 both;
}

.icti-motion03.is-playing .icti-m03__build-mask--outer {
  animation: ictiM03BuildOuter var(--icti-m03-duration) cubic-bezier(.18, .78, .18, 1) 1 both;
}

.icti-motion03.is-playing .icti-m03__build-mask--middle {
  animation: ictiM03BuildMiddle var(--icti-m03-duration) cubic-bezier(.18, .78, .18, 1) 1 both;
}

.icti-motion03.is-playing .icti-m03__build-mask--inner {
  animation: ictiM03BuildInner var(--icti-m03-duration) cubic-bezier(.18, .78, .18, 1) 1 both;
}

.icti-motion03__replay {
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(29, 34, 29, .22);
  border-radius: 999px;
  bottom: 18px;
  color: var(--icti-m03-ink);
  cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  font-size: 10px;
  letter-spacing: .04em;
  padding: 8px 12px;
  position: absolute;
  right: 18px;
  z-index: 6;
}

.icti-motion03__replay:hover,
.icti-motion03__replay:focus-visible {
  background: var(--icti-m03-green);
  border-color: var(--icti-m03-green);
  outline: none;
}

body[data-icti-motion03-capture="true"] .icti-motion03__replay {
  display: none;
}

.icti-motion03.is-resetting .icti-m03,
.icti-motion03.is-resetting .icti-motion03__final,
.icti-motion03.is-final .icti-m03 {
  opacity: 0 !important;
}

.icti-motion03.is-resetting *,
.icti-motion03.is-final * {
  animation: none !important;
}

.icti-motion03.is-final .icti-m03 {
  visibility: hidden;
}

.icti-motion03.is-final .icti-motion03__final {
  opacity: 1 !important;
  visibility: visible;
}

.icti-motion03--integrated {
  bottom: 5%;
  left: 3.3%;
  position: absolute;
  right: 3.3%;
  top: 35%;
  z-index: 1;
}

.icti-motion-logic .icti-scene-head {
  position: relative;
  z-index: 3;
}

.icti-motion03--integrated .icti-motion03__replay {
  bottom: 12px;
  right: 12px;
}

@keyframes ictiM03Process {
  0%, 72.5% { opacity: 1; }
  73.913%, 100% { opacity: 0; }
}

@keyframes ictiM03Final {
  0%, 72.5% { opacity: 0; visibility: hidden; }
  73.913%, 100% { opacity: 1; visibility: visible; }
}

@keyframes ictiM03Registration {
  0% { opacity: 0; }
  4.35%, 48.9% { opacity: 1; }
  55.4%, 100% { opacity: 0; }
}

@keyframes ictiM03SequenceOuter {
  0%, 3.8% { stroke-dashoffset: 100; }
  15.2%, 100% { stroke-dashoffset: 71; }
}

@keyframes ictiM03SequenceMiddle {
  0%, 19.0% { stroke-dashoffset: 100; }
  31.8%, 100% { stroke-dashoffset: 71; }
}

@keyframes ictiM03SequenceInner {
  0%, 35.0% { stroke-dashoffset: 100; }
  46.2%, 100% { stroke-dashoffset: 71; }
}

@keyframes ictiM03HandoffOne {
  0%, 14.0% { opacity: 0; }
  15.8%, 50.5% { opacity: 1; }
  56.0%, 100% { opacity: 0; }
}

@keyframes ictiM03HandoffTwo {
  0%, 30.5% { opacity: 0; }
  32.5%, 50.5% { opacity: 1; }
  57.5%, 100% { opacity: 0; }
}

@keyframes ictiM03HandoffThree {
  0%, 45.0% { opacity: 0; }
  47.0%, 51.8% { opacity: 1; }
  59.0%, 100% { opacity: 0; }
}

@keyframes ictiM03DrawHandoffOne {
  0%, 15.8% { opacity: 0; stroke-dasharray: 0 100; }
  19.6%, 100% { opacity: 1; stroke-dasharray: 100 0; }
}

@keyframes ictiM03DrawHandoffTwo {
  0%, 32.5% { opacity: 0; stroke-dasharray: 0 100; }
  36.4%, 100% { opacity: 1; stroke-dasharray: 100 0; }
}

@keyframes ictiM03DrawHandoffThree {
  0%, 47.0% { opacity: 0; stroke-dasharray: 0 100; }
  49.3%, 100% { opacity: 1; stroke-dasharray: 100 0; }
}

@keyframes ictiM03CenterCore {
  0%, 48.0% { opacity: 0; transform: scale(.25); transform-origin: 500px 500px; }
  50.0%, 100% { opacity: 1; transform: scale(1); transform-origin: 500px 500px; }
}

@keyframes ictiM03BuildLayer {
  0%, 49.4% { opacity: 0; }
  50.0%, 72.5% { opacity: 1; }
  73.913%, 100% { opacity: 0; }
}

@keyframes ictiM03BuildOuter {
  0%, 49.5% { stroke-dashoffset: 100; }
  57.1%, 100% { stroke-dashoffset: 0; }
}

@keyframes ictiM03BuildMiddle {
  0%, 56.0% { stroke-dashoffset: 100; }
  64.2%, 100% { stroke-dashoffset: 0; }
}

@keyframes ictiM03BuildInner {
  0%, 62.5% { stroke-dashoffset: 100; }
  70.0%, 100% { stroke-dashoffset: 0; }
}

@media (max-width: 656px) {
  .icti-motion03--integrated {
    aspect-ratio: 1;
    margin-top: 26px;
    position: relative;
    inset: auto;
    width: 100%;
  }

  .icti-motion03--integrated .icti-m03 {
    height: 92%;
  }

  .icti-motion03--integrated .icti-motion03__final {
    height: 71.8%;
  }

  .icti-scene .icti-motion03--integrated .icti-motion03__final {
    height: 71.8%;
    width: auto;
  }

  .icti-motion03__replay {
    bottom: 10px;
    right: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .icti-motion03 *,
  .icti-motion03 *::before,
  .icti-motion03 *::after {
    animation: none !important;
  }
}