@font-face {
  font-family: "New Tegomin";
  src: url("./assets/NewTegomin-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "New Tegomin UI";
  src: url("./assets/NewTegomin-UI.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Source Han Serif SC";
  src: url("./assets/SourceHanSerifCN-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Aa Yansong";
  src: url("./assets/AaYansong-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root {
  color-scheme: light;
  font-family: Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #fff;
}
* { box-sizing: border-box; }
html, body {
  position: fixed; inset: 0; width: 100%; height: 100%; margin: 0; overflow: hidden;
  overscroll-behavior: none; background: #fff;
}
button, textarea, input { font: inherit; }
.app {
  position: absolute; left: 50%; top: 0;
  width: 402px; height: 874px; min-height: 874px;
  margin: 0; display: flex; flex-direction: column; background: #fff;
  transform: translateX(-50%) scale(var(--app-scale, 1)); transform-origin: top center;
}
.stage {
  position: relative; flex: 0 0 calc(690px * var(--scene-scale, 1)); height: calc(690px * var(--scene-scale, 1)); overflow: visible;
  display: flex; justify-content: center; align-items: flex-start; background: #fff;
}
.stone-scene {
  position: relative; width: 402px; height: 690px; flex: none;
  transform: scale(var(--scene-scale, 1)); transform-origin: top center;
}
.canvas-frame {
  position: absolute; z-index: 1; width: 402px; left: -8px; top: 100px;
  transform-origin: center center;
  transition: transform .68s cubic-bezier(.22, 1, .36, 1), opacity .24s ease;
  will-change: transform, opacity;
}
.toolbar-backdrop {
  position: absolute; z-index: 5; left: 0; right: 0; top: 0; height: 136px;
  background: rgba(255, 255, 255, .3); opacity: 1; pointer-events: none;
  transition: opacity .2s ease;
}
.stone-scene.is-toolbar-overlap .toolbar-backdrop { opacity: 1; }
.stone-scene.is-scaling .canvas-frame { pointer-events: none; }
.stone-scene.is-picker-open .canvas-frame { pointer-events: none; }
#stoneCanvas {
  display: block; width: 100%; height: auto; aspect-ratio: 750 / 1180;
  touch-action: none; -webkit-user-select: none; user-select: none;
  transition: opacity .26s ease;
}
.gallery-toggle {
  position: absolute; z-index: 6; top: 83px; left: 17px;
  width: 53px; height: 41px; padding: 0; border: 0;
  background: transparent; color: #000; opacity: .3; appearance: none;
  transition: opacity .28s ease;
  -webkit-tap-highlight-color: transparent;
}
.gallery-toggle span {
  position: absolute; left: 13px; top: 10px; width: 40px;
  color: #000; font-family: "Songti SC", "Source Han Serif SC", STSong, serif;
  font-size: 20px; line-height: 25px; white-space: nowrap; pointer-events: none;
}
.gallery-toggle small,
.mode-tabs button small {
  position: absolute; left: 0; top: 0; margin: 0;
  color: #000; font-family: "Songti SC", "Source Han Serif SC", STSong, serif;
  font-size: 12px; font-weight: 400; line-height: 15px; white-space: nowrap;
}
.gallery-toggle[aria-expanded="true"] { opacity: 1; }
.tab-indicator {
  position: absolute; z-index: 7; left: 0; top: 120px; width: 40px; height: 1px;
  background: #000; pointer-events: none;
  transform: translateX(var(--tab-indicator-x, 92px));
  transition: transform .46s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}
.stone-gallery { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.stone-gallery.is-switching { pointer-events: none; }
.stone-gallery.is-switching .gallery-stone { pointer-events: none; }
.gallery-stone {
  position: absolute; display: block; padding: 0; border: 0;
  background: transparent; appearance: none; opacity: var(--layout-opacity, 1);
  transform: translate(var(--scatter-x, 0px), var(--scatter-y, 0px)) scale(var(--thumb-scale, 1));
  transition:
    opacity .3s ease var(--enter-delay, 0s),
    transform .68s cubic-bezier(.22, 1, .36, 1) var(--enter-delay, 0s);
  will-change: transform, opacity;
  -webkit-tap-highlight-color: transparent;
}
button.gallery-stone { pointer-events: auto; cursor: pointer; }
.gallery-stone img { display: block; width: 100%; height: 100%; object-fit: contain; }
.gallery-stone[data-slot="upper-left"] { left: 65.5px; top: 249px; width: 64.5px; height: 52px; --closed-x: -155px; --closed-y: -115px; --enter-delay: .03s; }
.gallery-stone[data-slot="upper-middle"] { left: 155px; top: 291px; width: 99px; height: 73px; --closed-x: -12px; --closed-y: -150px; --enter-delay: .05s; }
.gallery-stone[data-slot="upper-right"] { left: 268.5px; top: 238px; width: 64px; height: 87px; --closed-x: 145px; --closed-y: -120px; --enter-delay: .07s; }
.gallery-stone[data-slot="middle-left"] { left: 57.5px; top: 339px; width: 73px; height: 97px; --closed-x: -150px; --closed-y: 0px; --enter-delay: .08s; }
.gallery-stone[data-slot="middle-right"] { left: 295px; top: 373px; width: 82px; height: 55px; --closed-x: 150px; --closed-y: 0px; --enter-delay: .09s; }
.gallery-stone[data-slot="lower-left"] { left: 82px; top: 538px; width: 75.5px; height: 53px; --closed-x: -155px; --closed-y: 115px; --enter-delay: .11s; }
.gallery-stone[data-slot="lower-left-center"] { left: 22.5px; top: 451px; width: 86px; height: 64px; --closed-x: -72px; --closed-y: 145px; --enter-delay: .12s; }
.gallery-stone[data-slot="lower-middle"] { left: 199px; top: 556px; width: 78px; height: 57.5px; --closed-x: 0px; --closed-y: 155px; --enter-delay: .13s; }
.gallery-stone[data-slot="lower-right"] { left: 291px; top: 476px; width: 65px; height: 79px; --closed-x: 145px; --closed-y: 110px; --enter-delay: .15s; }
.gallery-stone[data-slot="center"] {
  left: 166px; top: 394px; width: 83px; height: 111px;
  opacity: 0; pointer-events: auto; cursor: pointer;
}
.stone-gallery.is-hidden .gallery-stone[data-slot="center"] { pointer-events: none; }
.stone-gallery.is-hidden .gallery-stone:not([data-slot="center"]) {
  opacity: 0;
  transform: translate(var(--closed-x, 0px), var(--closed-y, 0px)) scale(.72);
  transition-delay: 0s;
  pointer-events: none;
}
.gallery-stone:focus-visible, .gallery-toggle:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
.stone-flight {
  position: fixed; z-index: 20; display: block; object-fit: fill;
  pointer-events: none; will-change: left, top, width, height, opacity, transform;
}
.stone-snapshot { position: absolute; z-index: 2; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
#stoneInput {
  position: fixed; z-index: -1; width: 2px; height: 2px; padding: 0;
  border: 0; border-radius: 0; opacity: 0; font-size: 16px;
  resize: none; pointer-events: none;
}
.controls {
  position: relative; z-index: 9; flex: 0 0 auto; width: 100%;
  height: 184px;
  padding: 18px 17px calc(16px + env(safe-area-inset-bottom)) 22px; background: rgba(255, 255, 255, .3);
  transition: background-color .2s ease;
}
.controls.is-stone-overlap { background: rgba(255, 255, 255, .3); }
.mode-tabs {
  position: absolute; z-index: 6; inset: 0; pointer-events: none;
}
.mode-tabs button {
  position: absolute; top: 83px; width: 53px; height: 41px; padding: 0;
  border: 0; background: transparent; color: #000; opacity: .3;
  appearance: none; -webkit-tap-highlight-color: transparent; pointer-events: auto;
  transition: opacity .28s ease;
}
.mode-tabs button span {
  position: absolute; left: 11px; top: 10px; width: 42px;
  font-family: "Songti SC", "Source Han Serif SC", STSong, serif;
  font-size: 20px; font-weight: 400; line-height: 25px; white-space: nowrap;
}
.mode-tabs button.active { opacity: 1; }
.stone-scene.is-picker-open .mode-tabs button.active { opacity: .3; }
.mode-tabs .mode-type { left: 81px; }
.mode-tabs .mode-preset { left: 145px; }
.mode-tabs .mode-draw { left: 208px; }
.save-button {
  position: absolute; z-index: 6; left: 333px; top: 89px; width: 48px; height: 36px;
  padding: 0; border: 0; color: #fff; opacity: .7;
  background: transparent url("./assets/ui-save-stone-figma.png") center / 48px 36px no-repeat;
  font-family: "Songti SC", "Source Han Serif SC", STSong, serif;
  font-size: 18px; line-height: 36px; appearance: none;
}
.draw-edit-tools { display: none; position: absolute; z-index: 7; left: 23px; top: 137px; gap: 4px; }
.stone-scene.is-drawing .draw-edit-tools { display: flex; }
.stone-scene.is-picker-open .draw-edit-tools,
.stone-scene.is-picker-open .preset-palette { display: none; }
.draw-edit-tools button { width: 30px; height: 30px; padding: 2px; border: 0; background: transparent; color: #111; appearance: none; }
.draw-edit-tools svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.draw-edit-tools button:disabled { opacity: .25; }
.preset-palette {
  position: absolute; z-index: 8; left: 22px; right: 22px; top: 129px;
  display: grid; grid-template-columns: repeat(9, minmax(0, 1fr));
  grid-template-rows: repeat(2, 38px); gap: 2px; padding: 6px;
  background: rgba(255, 255, 255, .94);
}
.preset-palette[hidden] { display: none; }
.preset-palette button {
  display: grid; place-items: center; width: 100%; height: 38px;
  min-width: 0; padding: 2px; border: 0; background: transparent; color: #111;
  appearance: none; -webkit-tap-highlight-color: transparent;
}
.preset-palette button:active { background: #ededed; }
.preset-palette canvas { display: block; width: 32px; height: 32px; max-width: 100%; aspect-ratio: 1; }
.tool-panel {
  position: absolute; z-index: 8; left: 82px; top: 129px; width: 230px;
  padding: 8px; background: rgba(255, 255, 255, .92);
  box-shadow: 0 1px 8px rgba(0, 0, 0, .07);
}
.tool-panel[hidden] { display: none; }
.text-settings-panel { display: grid; gap: 7px; }
.text-option-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.text-option-group button {
  min-width: 0; height: 34px; padding: 0; border: 0; border-radius: 5px;
  background: transparent; color: #111; appearance: none; -webkit-tap-highlight-color: transparent;
}
.text-option-group button.active { background: #e9e9e9; }
.align-options button { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 0 15px; }
.align-options button i { display: block; width: 22px; height: 1.5px; background: currentColor; }
.align-options button i:nth-child(2) { width: 15px; }
.align-options button[data-text-align="center"] { align-items: center; }
.align-options button[data-text-align="right"] { align-items: flex-end; }
.font-options button { font-size: 22px; line-height: 34px; }
.font-tegomin { font-family: "New Tegomin", serif; }
.font-source-serif { font-family: "Aa Yansong", "Songti SC", STSong, serif; }
.font-pingfang { font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, sans-serif; }
.position-options button { font-size: 12px; }
.panel-range {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center;
  min-height: 28px; font-size: 11px; color: #111;
}
.panel-range input[type="range"] { display: block; width: 100%; height: 18px; margin: 0; accent-color: #111; }
.draw-settings-panel { left: 201px; width: 178px; display: grid; gap: 6px; }
.paint-color-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.paint-color-options button {
  display: grid; place-items: center; height: 31px; padding: 0; border: 1px solid transparent;
  border-radius: 4px; background: transparent; appearance: none; -webkit-tap-highlight-color: transparent;
}
.paint-color-options button.active { border-color: #1b1b1b; background: rgba(255, 255, 255, .72); }
.paint-color-options button i {
  display: block; width: 19px; height: 19px; border: 1px solid rgba(0, 0, 0, .28);
  border-radius: 50%; background: #eee9dd;
}
.paint-color-options button[data-paint-color="charcoal"] i { background: #383630; }
.paint-color-options button[data-paint-color="ochre"] i { background: #9b4e3a; }
.settings { display: grid; gap: 0; }
.settings label {
  height: 23px; display: grid; grid-template-columns: 48px minmax(0, 1fr);
  gap: 0; align-items: center; color: #111; font-size: 11px; line-height: 1;
}
.settings label span { white-space: nowrap; }
.settings input[type="range"] {
  display: block; width: 100%; height: 17px; margin: 0; accent-color: #111;
}
.credit { position: absolute; top: 116px; left: 0; width: 100%; margin: 0; color: #a9a9a9; font: 12px/1 Inter, Arial, sans-serif; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .canvas-frame, .gallery-stone, #stoneCanvas, .tab-indicator { transition-duration: 1ms !important; transition-delay: 0s !important; }
}