:root{--vt-c-white: #ffffff;--vt-c-white-soft: #f8f8f8;--vt-c-white-mute: #f2f2f2;--vt-c-indigo: #2c3e50;--vt-c-divider-light-1: rgba(60, 60, 60, .29);--vt-c-divider-light-2: rgba(60, 60, 60, .12);--vt-c-text-light-1: var(--vt-c-indigo);--vt-c-text-light-2: rgba(60, 60, 60, .66)}:root{--color-background: var(--vt-c-white);--color-background-soft: var(--vt-c-white-soft);--color-background-mute: var(--vt-c-white-mute);--color-border: var(--vt-c-divider-light-2);--color-border-hover: var(--vt-c-divider-light-1);--color-heading: var(--vt-c-text-light-1);--color-text: var(--vt-c-text-light-1)}*,*:before,*:after{box-sizing:border-box;margin:0;font-weight:400}body{min-height:100vh;color:var(--color-text);background:var(--color-background);transition:color .5s,background-color .5s;line-height:1.6;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:15px;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@font-face{font-family:CustomKaiTi;font-weight:400;font-style:normal;font-display:swap}#app{max-width:1280px;margin:0 auto;padding:2rem;font-weight:400;display:flex;justify-content:center}@media (min-width: 1024px){body{display:flex;place-items:center}#app{padding:0 2rem}}body{background-color:#fff!important}.avatar-app{max-width:800px;width:100%;margin:0 auto;padding:1rem;display:flex;flex-direction:column;align-items:center;box-sizing:border-box}h1{margin-bottom:1.5rem;color:#333;font-size:1.8rem;text-align:center}.avatar-container{margin-bottom:1.5rem;max-width:800px;width:100%;display:flex;justify-content:center}.avatar-frame{width:min(450px,90vw);height:min(450px,90vw);aspect-ratio:1/1;border:2px dashed #ccc;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;background-color:#f9f9f9}.upload-prompt{color:#666;font-size:clamp(1rem,4vw,1.2rem);text-align:center;padding:1rem}.avatar-display-container{position:relative;width:min(450px,90vw);height:min(450px,90vw);margin:0 auto}.avatar-canvas{border-radius:8px;box-shadow:0 4px 8px #0000001a;width:100%;height:100%;object-fit:contain;display:block}.watermark-position-vertical{position:absolute;right:-200px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:15px;z-index:10}.watermark-position-vertical input[type=range]{-webkit-appearance:none;appearance:none;width:300px;height:20px;background:#f1f1f1;border-radius:8px;outline:none;transform:rotate(90deg);transform-origin:center center;margin:100px 0}@media screen and (max-width: 768px){.avatar-display-container{display:flex;flex-direction:column;align-items:center;height:min(490px,90vw)}.watermark-position-vertical{position:relative;right:auto;top:auto;transform:none;margin-top:20px;width:100%;max-width:min(450px,90vw)}.watermark-position-vertical input[type=range]{transform:none;margin:10px 0;width:100%}}.watermark-position-vertical input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:#8e5ac8;border-radius:50%;cursor:pointer}.watermark-position-vertical input[type=range]::-moz-range-thumb{width:20px;height:20px;background:#8e5ac8;border-radius:50%;cursor:pointer;border:none}.controls{width:100%;display:flex;flex-direction:column;align-items:center;gap:1.25rem}.nickname-input{width:100%;max-width:min(450px,90vw)}.nickname-input label{display:block;margin-bottom:.5rem;font-weight:700;color:#000;font-size:1rem}.nickname-input input{width:100%;padding:.75rem;font-size:1rem;border:1px solid #ccc;border-radius:8px;-webkit-appearance:none;appearance:none;box-shadow:none;height:44px}.download-btn{padding:.875rem 1.75rem;background-color:#8e5ac8;color:#fff;border:none;border-radius:8px;font-size:1.1rem;cursor:pointer;transition:background-color .2s;min-height:44px;min-width:44px;width:min(100%,200px);margin-top:.5rem}.download-btn:hover{background-color:#7a4aad}.download-btn:disabled{background-color:#ccc;cursor:not-allowed}.download-btn:active{background-color:#6b3d9e;transform:translateY(1px)}.download-btn:disabled:active{background-color:#ccc;transform:none}.crop-modal{position:fixed;inset:0;background-color:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;padding:.5rem;box-sizing:border-box}.crop-container{background-color:#fff;padding:1rem;border-radius:12px;width:100%;max-width:600px;max-height:90vh;overflow:auto;display:flex;flex-direction:column;box-shadow:0 4px 20px #0000004d}.crop-container h2{color:#000;margin:0 0 1rem;text-align:center;font-size:1.5rem}.cropper-container{margin:.5rem 0;max-height:60vh;overflow:hidden;width:100%;display:flex;flex-direction:column;align-items:center}.crop-controls{display:flex;justify-content:space-between;gap:1rem;margin-top:1rem;width:100%}.crop-controls button{padding:.75rem 1rem;border:none;border-radius:8px;cursor:pointer;min-height:44px;min-width:80px;flex:1;font-size:1rem;font-weight:500}.crop-controls button:first-child{background-color:#f1f1f1}.crop-controls button:last-child{background-color:#8e5ac8;color:#fff}.crop-controls button:active{transform:translateY(1px)}.crop-controls button:first-child:active{background-color:#e0e0e0}.crop-controls button:last-child:active{background-color:#6b3d9e}.crop-instructions{margin-top:12px;text-align:center;color:#666;font-size:.9rem;background-color:#f5f5f5;padding:10px;border-radius:8px;width:100%;box-sizing:border-box}.crop-instructions p{margin:.5rem 0}@media screen and (orientation: portrait){.avatar-app{padding:1rem .5rem}h1{font-size:1.5rem;margin-bottom:1rem}}.loading-overlay{position:fixed;inset:0;background-color:#fffc;display:flex;align-items:center;justify-content:center;z-index:2000;flex-direction:column}.loading-spinner{width:50px;height:50px;border:5px solid #f3f3f3;border-top:5px solid #8E5AC8;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem}.loading-text{color:#333;font-size:1rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}