@import url('https://wanyne.com/resources/fonts/SuisseIntl/SuisseIntl.css');
@import url('https://wanyne.com/resources/fonts/SuisseIntl/SuisseIntlMono.css');
@import url('https://wanyne.com/resources/fonts/Pretendard/Pretendard.css');

:root {
  --emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji',
    'Android Emoji';
  --sans-serif: 'SuisseIntl', 'Susa60-Variable', 'OnulSusa60', 'Pretendard',
    'Pretendard-JP', var(--emoji), sans-serif;
  --monospace: 'SuisseIntlMono', 'SF Mono', 'Consolas', 'OnulSusa60',
    var(--emoji), monospace;
  --font-family: var(--sans-serif);
  --font-family-input: var(--monospace);
  --rotate: -21.76deg;
  --color-bg: rgb(0, 0, 0);
  --color-circle: rgb(20, 20, 20);
}

html {
  overflow: hidden;
  font-family: var(--monospace);
  font-size: calc(var(--pxmm) * 1px);
  cursor: none !important;
}
body {
  margin: 0;
  touch-action: none;
  background: black;
  color: white;
  cursor: none !important;
}
* {
  box-sizing: border-box;
  user-select: none;
  font-family: var(--monospace);
}
canvas {
  background: transparent;
}
[layer] {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#app {
  width: calc(var(--pxmm) * 596.7px);
  height: calc(var(--pxmm) * 335.7px);
  pointer-events: none;
}

/* 

ambient-bg 

*/
#app-ambient {
  background: var(--color-bg);
}
#app-ambient canvas {
  width: 100%;
  height: 100%;
}
#app-ambient .cover {
  backdrop-filter: blur(10px);
}

/* 

touch 

*/
#app-display {
  overflow: hidden;
  --margin: calc(var(--pxmm) * 15px);
  --box-outer-shadow: 0 0 calc(var(--pxmm) * 5px) calc(var(--pxmm) * 5px)
    var(--color-circle);
  --box-inner-shadow: inset 0 0 calc(var(--pxmm) * 5px) calc(var(--pxmm) * 5px)
    var(--color-circle);
  --box-outer-shadow-2: 0 0 calc(var(--pxmm) * 5px) calc(var(--pxmm) * 5px)
    var(--color-circle);
  --box-inner-shadow-2: inset 0 0 calc(var(--pxmm) * 15px)
    calc(var(--pxmm) * 15px) var(--color-circle);
}
#app-display > * > .wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

#app-display > .drawing {
  display: flex;
  justify-content: center;
  align-items: center;
}
#app-display > .drawing > .wrapper {
  height: calc(var(--pxmm) * 310px);
  aspect-ratio: 1/1;
  position: relative;
  border-radius: 100%;
  background: var(--color-circle);
  box-shadow: var(--box-outer-shadow-2);
}
#app-display > .drawing > .wrapper > [layer] {
  border-radius: 100%;
  overflow: hidden;
}
#app-display > .drawing > .wrapper > .canvas {
  transform: rotate(var(--rotate));
}
#touch-drawing {
  pointer-events: all;
}
#app-display > .drawing > .wrapper > .lines {
  display: none;
  transform: rotate(var(--rotate));
}
#app-display > .drawing > .wrapper > .shadow {
  top: -1px;
  left: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  box-shadow: var(--box-inner-shadow-2);
}
#app-display > .drawing > .wrapper > .text {
  position: absolute;
  width: 100%;
  height: 109%;
  transform: rotate(-21.76deg);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  font-size: 6rem;
}
#canvas-line-drawing,
#canvas-brush-drawing {
  transform: opacity ease-out 0.5s;
  opacity: 1;
}
#canvas-brush-drawing {
  display: none;
}

#app-display > .x,
#app-display > .y {
  display: flex;
}
#app-display > .x {
  justify-content: flex-start;
  align-items: flex-end;
}
#app-display > .y {
  justify-content: flex-end;
  align-items: flex-start;
}
#app-display > .x > .wrapper,
#app-display > .y > .wrapper {
  height: calc(var(--pxmm) * 130px);
  aspect-ratio: 1/1;
  position: relative;
  border-radius: 100%;
  transform: rotate(var(--rotate));
  background: var(--color-circle);
  box-shadow: var(--box-outer-shadow);
}
#app-display > .x > .wrapper {
  margin-bottom: var(--margin);
  margin-left: var(--margin);
}
#app-display > .y > .wrapper {
  margin-top: var(--margin);
  margin-right: var(--margin);
}
#app-display > .x > .wrapper > .canvas,
#app-display > .y > .wrapper > .canvas {
  overflow: hidden;
  border-radius: 100%;
}
#app-display > .x > .wrapper > .lines,
#app-display > .y > .wrapper > .lines {
  display: none;
}
#app-display > .x > .wrapper > .shadow,
#app-display > .y > .wrapper > .shadow {
  top: -1px;
  left: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  border-radius: 100%;
  box-shadow: var(--box-inner-shadow);
}

#app-display > .knobs {
  display: flex;
}
#app-display > .knobs.l {
  justify-content: flex-start;
  align-items: flex-start;
}
#app-display > .knobs.r {
  justify-content: flex-end;
  align-items: flex-end;
}
#app-display > .knobs > .wrapper {
  flex-direction: column;
}
#app-display > .knobs.l > .wrapper {
  margin-top: calc(var(--pxmm) * 25px);
  margin-left: calc(var(--pxmm) * 6px);
  transform: rotate(-21.76deg);
}
#app-display > .knobs.r > .wrapper {
  margin-bottom: calc(var(--pxmm) * 25px);
  margin-right: calc(var(--pxmm) * 6px);
  transform: rotate(-21.76deg);
}
#app-display > .knobs > .wrapper > .knob {
  display: block;
  width: calc(var(--pxmm) * 150px);
  height: calc(var(--pxmm) * 20px);
  margin-bottom: calc(var(--pxmm) * 6px);
}
#app-display > .knobs > .wrapper > .knob > .label {
  width: 100%;
  height: calc(var(--pxmm) * 6px);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 4rem;
}
#app-display > .knobs > .wrapper > .knob > .label > .text {
  width: calc(var(--pxmm) * 24px);
  display: flex;
  justify-content: center;
  align-items: center;
}
#app-display > .knobs > .wrapper > .knob > .label > .icon {
  display: flex;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(var(--pxmm) * 1px);
}
#app-display > .knobs > .wrapper > .knob > .label > .icon > .circle {
  width: calc(var(--pxmm) * 5px);
  height: calc(var(--pxmm) * 5px);
  border: solid calc(var(--pxmm) * 0.5px) rgb(60, 60, 60);
  border-radius: 1000px;
}
#app-display > .knobs > .wrapper > .knob > .label > .icon > .this {
  border-color: white;
}
#app-display > .knobs > .wrapper > .knob > .slider {
  width: 100%;
  height: calc(var(--pxmm) * 12px);
  padding: 0 calc(var(--pxmm) * 6px);
}
#app-display > .knobs > .wrapper > .knob > .slider .line {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#app-display > .knobs > .wrapper > .knob > .slider .shadow {
  position: relative;
  width: 100%;
  height: calc(var(--pxmm) * 2px);
  background: rgb(20, 20, 20);
  border-radius: 100px;
  overflow: hidden;
}
#app-display > .knobs > .wrapper > .knob > .slider .fill {
  top: 0;
  left: 0;
  position: absolute;
  width: 50%;
  height: calc(var(--pxmm) * 2px);
  background: rgb(180, 180, 180);
  transition: all 0.1s ease-out;
}
#app-display > .knobs > .wrapper > .knob > .slider .value {
  position: absolute;
  width: calc(var(--pxmm) * 12px);
  height: calc(var(--pxmm) * 12px);
  background: black;
  border: solid calc(var(--pxmm) * 0.5px) white;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 50%;
  left: calc(var(--pxmm) * -6px);
  top: 0;
  border-radius: 100%;
  transition: all 0.1s ease-out;
  font-size: 3rem;
}

#app-display > .camera {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
#app-display > .camera .wrapper {
  height: calc(var(--pxmm) * 90px);
  aspect-ratio: 1/1;
  position: relative;
  border-radius: 100%;
  transform: rotate(-21.76deg);
  background: var(--color-circle);
  box-shadow: var(--box-outer-shadow);
  margin-left: calc(var(--pxmm) * 41px);
  margin-bottom: calc(var(--pxmm) * 75px);

  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}
#app-display > .camera .wrapper[hide] {
  transform: scale(0, 0);
  opacity: 0;
}
#app-display > .camera .wrapper > .canvas {
  overflow: hidden;
  border-radius: 100%;
  transform: scale(-1, 1);
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}
#app-display > .camera .wrapper > .canvas canvas {
  filter: saturate(0%);
}
#app-display > .camera .wrapper > .lines {
  display: none;
}
#app-display > .camera .wrapper > .shadow {
  top: -1px;
  left: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  border-radius: 100%;
  box-shadow: var(--box-inner-shadow);
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}
#app-display > .guide > .button {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
#app-display > .guide > .button > img {
  width: calc(var(--pxmm) * 50px);
  transform: rotate(-21.76deg);
  margin-bottom: calc(var(--pxmm) * 10px);
  margin-right: calc(var(--pxmm) * 5px);
  pointer-events: all;
}

#app-guide-static > .wrapper {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
#guide-static {
  transform: rotate(-21.76deg);
  width: calc(var(--pxmm) * 120px);
  margin-bottom: calc(var(--pxmm) * 99px);
  margin-right: calc(var(--pxmm) * 20px);
}
#app-guide > .wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
#app-guide > .wrapper .rotate {
  transform: rotate(-21.76deg);
}
#app-guide > .wrapper .images {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
}
#app-guide > .wrapper .images > img {
  opacity: 0;
  transition: opacity 0.5s ease-out;
  top: calc(var(--pxmm) * 80px);
}
#guide-gm1 {
  top: 0 !important;
}
/*
#app-guide > .wrapper {
  opacity: 0;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  transition: opacity 0.5s ease-out;
}
#app-guide > .wrapper .rotate {
  transform: rotate(-21.76deg);
}
#app-guide > .wrapper .images {
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}
#app-guide > .wrapper .images > img {
  opacity: 0.2;
  transition: opacity 0.5s ease-out;
}*/
#app-guide-msg {
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-21.76deg);
  transition: opacity 0.5s ease-out;
}
#guide-msg {
  font-size: calc(var(--pxmm) * 20px);
  transition: opacity 0.5s ease-out;
}

#slider-knob-2d {
  opacity: 0;
}

#touch .lines {
  display: flex;
  align-items: center;
  justify-content: center;
}
#touch .lines .circle {
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 100%;
  border: solid 1px rgb(180, 180, 180);
}
#touch .lines .innersq {
  width: 70.71%;
  height: 70.71%;
  position: absolute;
  border: solid 1px rgb(180, 180, 180);
}
#touch .lines .verti {
  width: 0;
  height: 100%;
  position: absolute;
  border-left: solid 1px rgb(180, 180, 180);
}
#touch .lines .hori {
  width: 100%;
  height: 0;
  position: absolute;
  border-top: solid 1px rgb(180, 180, 180);
}

.cursor {
  position: absolute;
  background: rgb(0, 255, 0);
  border-radius: 100%;
  outline-offset: 40px;
  outline: solid 1px rgb(0, 255, 0);
  z-index: 10000;
}

#app-guide-bg {
  overflow: hidden;
}
#guide-bg .boom {
  position: absolute;
  width: 0;
  height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
#guide-bg .boom > .circle {
  position: absolute;
  border-radius: 100% 100%;
  transition: all ease-out 1s;
  border: solid 3px rgba(255, 255, 255, 0.5);
  width: 0;
  height: 0;
}
#guide-bg .boom > .circle.max {
  width: 80vw;
  height: 80vw;
  opacity: 0;
}

#controls {
  width: 100vw;
  position: fixed;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000000;
}
.set {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.5rem;
  height: 2rem;
}
.set > input[type='range'] {
  width: 16rem;
  text-align: left;
}

label {
  display: inline-block;
  width: 6rem;
}
input[type='range'] {
  overflow: hidden;
  height: 3rem;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  margin: 0;
}
input[type='range']::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  background: white;
}
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 2px;
  height: 1.5rem;
  margin-top: -0.6rem;
  background: red;
  cursor: pointer;
}