* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

svg,
svg * {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
    outline: none;
}

body.preview {
  --path-fill: var(--dark);
  --path-stroke: var(--dark);
}


html,
body {
  touch-action: auto !important;
  overflow-x: hidden;
  overflow-y: auto;
}


#mainPath {
  fill: var(--path-fill);
  stroke: var(--path-stroke);
  stroke-width: 0.7;
}

path {
  pointer-events: none;
}

.connector {
  stroke: var(--connector-stroke);
  stroke-width: 0.4;
  pointer-events: none;
}

circle,
rect {
  cursor: pointer;
}

.anchor-smooth {
  fill: var(--anchor-smooth-fill);
  stroke: #009b6d;
  stroke-width: 0.4;
}

.anchor-square {
  fill: var(--anchor-square-fill);
  stroke: #e645689c;
  stroke-width: 0.4;
}


.anchor-smooth.selected-anchor,
.anchor-square.selected-anchor {
  stroke: #0075d4 !important;
  stroke-width: 1.5 !important;
  
}
.anchor-tangent {
  fill: var(--anchor-tangent-fill);
  stroke: var(--white);
}

.handle {
  fill: var(--handle-fill);
  stroke: var(--handle-stroke);
}


.hit-target {
  fill: transparent !important;
  stroke: none !important;
  pointer-events: all;
}
.coord-label {
  font-weight: bold;
  font-size: 6px;
  fill: var(--label-fill);
  stroke: var(--white);
  stroke-width: 0.2px;
  paint-order: stroke;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.2s ease-out;
}

.guideline {
  stroke: var(--guideline-stroke);
  stroke-width: 0.2px;
  stroke-dasharray: 2 2;
  opacity: 1;
  transition: opacity 0.2s, stroke 0.2s;
}

.guide-h {
  cursor: ns-resize;
}

.guide-v {
  cursor: ew-resize;
}


.isvg {
  width: 100%;
  height: 100vh;
  margin: 0;
  display: block;
  touch-action: none;
  user-select: none;
}


#widget {
  position: fixed;
  z-index: 10;
  pointer-events: none;
}

#widget .widget-body {
  pointer-events: auto;
}


.widget-body p {
  width: 100%;
  font-family: var(--font-primary);
  font-size: clamp(13px, 1.5rem + 0.3vw, 20px);
  font-weight: 425;
  user-select: none;

  margin: 0;
}


.widget-buttons {
  position: fixed;
  inset-inline-end: 50px;
  bottom: 50px;
  display: flex;
  gap: 16px;
}

.widget-buttons button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  
  height: 45px;
  padding: 0 15px;
  border: none;
  border-radius: 22.5px;
  background: var(--light);
  color: var(--dark);
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 525;
  cursor: pointer;
  user-select: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.widget-buttons button .btn-icon {
  width: 23px;
  height: 23px;
  object-fit: contain;
  transition: filter 0.25s ease;
}

.widget-buttons button:is(:hover, .active) {
  background: var(--dark);
  color: var(--light);
}

.widget-buttons button:is(:hover, .active) .btn-icon {
  filter: brightness(0) invert(1);
}


#themeBtn :is(.text-active, .icon-active),
#themeBtn.active :is(.text-default, .icon-default) {
  display: none;
}

#themeBtn :is(.text-default, .icon-default),
#themeBtn.active :is(.text-active, .icon-active) {
  display: inline;
}


@media (orientation: landscape) {
  #widget {
    width: clamp(20vw, calc(40vw - 25vh), 30vw);
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    inset-inline-start: clamp(5%, 7vw, 12%);
  }
}


@media (max-height: 650px) and (orientation: landscape) {
  .widget-body p {
    font-size: clamp(12px, 3vh + 0.5vw, 16px);
    
  }
}


@media (max-aspect-ratio: 1/1) {
  .isvg {
    height: clamp(65vh, 50vh + 30vw, 90vh);
    margin-top: 15px;
    margin-bottom: 0;
  }

  #widget {
    top: auto;
    bottom: clamp(75px, 13vh, 150px);
    inset-inline-start: 50%;
    transform: translateX(-50%);
    width: 75%;
  }

  [dir="ltr"] #widget {
    text-align: left;
  }

  [dir="rtl"] #widget {
    text-align: right;
    transform: translateX(50%);
  }
}

@media (max-width: 768px) {
  .widget-body p {
    font-size: clamp(13px, 3.2vw, 15px);
  }

  .connector {
    stroke-width: 0.7;
  }

  .coord-label {
    font-size: 8px;
    stroke-width: 0.3px;
  }

  .widget-buttons {
    inset-inline-end: 20px;
    bottom: 25px;
    gap: 10px;
  }

  .widget-buttons button {
    height: 30px;
    
    padding: 0 12px;
    font-size: 13px;
    gap: 8px;

  }

  .widget-buttons button .btn-icon {
    width: 14px;
    height: 14px;
  }
}

@media (max-height: 650px) and (orientation: landscape) {
  .widget-buttons {
    inset-inline-end: 20px;
    bottom: 25px;
    gap: 10px;
  }

  .widget-buttons button {
    height: 30px;
    width: 90px;
    padding: 0 12px;
    font-size: 13px;
    gap: 8px;

  }

  .widget-buttons button .btn-icon {
    width: 14px;
    height: 14px;
  }
}