.page-container[data-v-3ac9b9e1]{display:flex;width:100%;height:100%;align-items:center;justify-content:center}.scene-wrapper[data-v-3ac9b9e1]{position:relative;width:100%;max-width:900px;aspect-ratio:900 / 1595;overflow:hidden}#scene-background[data-v-3ac9b9e1],#scene-background-guide[data-v-3ac9b9e1]{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}#animation-video-canvas[data-v-3ac9b9e1],#animation-video[data-v-3ac9b9e1]{position:absolute;width:57.56%;height:43.26%;bottom:22%;left:53%;transform:translate(-50%);z-index:2}#play-overlay[data-v-3ac9b9e1]{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#0000004d;cursor:pointer;transition:opacity .5s ease;opacity:0}.play-icon[data-v-3ac9b9e1]{width:15vw;max-width:80px}.play-text[data-v-3ac9b9e1]{color:#fff;font-size:18px;margin-top:15px;font-family:sans-serif,Microsoft YaHei}:root{--primary-color: #e57373;--primary-color-light: #ffaab8;--text-color: #333333;--light-text-color: #999999;--bg-gradient-start: #f9ebf1;--bg-gradient-end: #f5f7fa;--progress-bg-color: rgba(229, 115, 115, .2)}html{font-size:16px}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:linear-gradient(180deg,var(--bg-gradient-start) 0%,var(--bg-gradient-end) 100%);color:var(--text-color);height:100vh;overflow:hidden}*{box-sizing:border-box}.container{position:relative;width:100%;height:100%;max-width:480px;margin:0 auto}.top-section{position:absolute;top:22vh;left:50%;-webkit-transform:translateX(-50%);transform:translate(-50%);width:100%;display:flex;flex-direction:column;align-items:center;gap:2rem}.waveform-container{width:100%;height:6rem;display:flex;justify-content:center;align-items:center}.waveform{display:flex;align-items:center;gap:.625rem;height:100%}.waveform-bar{width:.5rem;height:.5rem;background:linear-gradient(to top,var(--primary-color),var(--primary-color-light));border-radius:.25rem}.recording .waveform-bar,.playing .waveform-bar{-webkit-animation:sound-wave .6s infinite alternate ease-in-out;animation:sound-wave .6s infinite alternate ease-in-out}@-webkit-keyframes sound-wave{0%{height:.5rem}to{height:5rem}}@keyframes sound-wave{0%{height:.5rem}to{height:5rem}}.time-display{font-size:1.5rem;font-weight:500}.record-control-group{position:absolute;top:65vh;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center}.record-button-wrapper{position:relative;width:4.3125rem;height:4.3125rem;cursor:pointer;transition:opacity .3s ease}.record-button-wrapper:active{-webkit-transform:scale(.95);transform:scale(.95);transition:transform .1s ease}.record-button-wrapper.disabled{opacity:.2;pointer-events:none}.record-progress-ring{width:100%;height:100%;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);appearance:none;-webkit-appearance:none;-moz-appearance:none;outline:none}.record-progress-ring:after,.record-progress-ring:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;box-shadow:none}.record-progress-ring:active{background-color:transparent;box-shadow:none}.progress-track,.progress-fill{fill:none;stroke-width:4}.progress-track{stroke:var(--progress-bg-color)}.progress-fill{stroke:url(#progress-gradient);stroke-linecap:round;transition:stroke-dashoffset .3s linear}.record-button-inner{position:absolute;inset:7px;margin:auto;background-color:var(--primary-color);border-radius:50%}.container.recording .record-button-inner{-webkit-animation:morph-to-square-bouncy .4s ease-out forwards;animation:morph-to-square-bouncy .4s ease-out forwards}@-webkit-keyframes morph-to-square-bouncy{0%{-webkit-transform:scale(1);transform:scale(1);border-radius:50%}85%{-webkit-transform:scale(.35);transform:scale(.35);border-radius:20%}to{-webkit-transform:scale(.38);transform:scale(.38);border-radius:25%}}@keyframes morph-to-square-bouncy{0%{transform:scale(1);border-radius:50%}85%{transform:scale(.35);border-radius:20%}to{transform:scale(.38);border-radius:25%}}.container.finished .record-button-inner{-webkit-animation:morph-to-circle-bouncy .4s ease-out forwards;animation:morph-to-circle-bouncy .4s ease-out forwards}@-webkit-keyframes morph-to-circle-bouncy{0%{-webkit-transform:scale(.38);transform:scale(.38);border-radius:25%}85%{-webkit-transform:scale(1.05);transform:scale(1.05);border-radius:55%}to{-webkit-transform:scale(1);transform:scale(1);border-radius:50%}}@keyframes morph-to-circle-bouncy{0%{transform:scale(.38);border-radius:25%}85%{transform:scale(1.05);border-radius:55%}to{transform:scale(1);border-radius:50%}}.record-button-label{font-size:.875rem;color:var(--light-text-color);margin-top:.625rem;transition:all .3s ease}.bottom-section{position:absolute;top:75vh;left:50%;transform:translate(-50%);display:flex}.secondary-controls{display:flex;justify-content:space-between;width:100%;padding:0 20%}.control-button{margin:0 20px;width:14.625rem;height:2.75rem;border:1px solid var(--primary-color);border-radius:1.375rem;background-color:transparent;color:var(--primary-color);font-size:1rem;font-weight:700;cursor:pointer;transition:opacity .3s ease}.control-button.disabled{opacity:.2;pointer-events:none}