:root{--bg:#f4f4f7;--text:#2a2740;--muted:#6c6880;--purple:#5b4ad4;--purple-light:#8a7df0;--card-bg:#fff;--card-border:#5b4ad41a;--card-shadow:0 18px 40px #2826401a, 0 4px 10px #2826400d;--line:#2b27401f;--ctrl-bg:#5b4ad414;--ctrl-hover:#5b4ad42e;--dot:#c4bedd}[data-theme=dark]{--bg:#232032;--text:#ece9f5;--muted:#b0abc9;--purple:#9b8ff5;--purple-light:#b3a8ff;--card-bg:#2b2740;--card-border:#ffffff1a;--card-shadow:0 18px 40px #00000059, 0 4px 10px #00000038;--line:#ffffff24;--ctrl-bg:#ffffff1a;--ctrl-hover:#fff3;--dot:#6f6890}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);flex-direction:column;height:100vh;font-family:Poppins,system-ui,-apple-system,Segoe UI,sans-serif;transition:background .3s,color .3s;display:flex;overflow:hidden}#app{display:contents}a{color:inherit;text-decoration:none}:focus-visible{outline:2px solid var(--purple);outline-offset:2px}.site-header{justify-content:space-between;align-items:center;width:100%;max-width:1100px;margin:0 auto;padding:26px 64px;display:flex}.brand{align-items:center;gap:10px;display:flex}.brand-logo{width:30px;height:30px}.brand-name{color:var(--purple);font-size:1.35rem;font-weight:700}.header-right{align-items:center;gap:28px;display:flex}.main-nav{gap:34px;display:flex}.main-nav a{opacity:.85;font-size:.95rem;font-weight:500;transition:opacity .2s,color .2s}.main-nav a:hover{opacity:1;color:var(--purple)}.theme-toggle{border:1px solid var(--card-border);background:var(--ctrl-bg);width:38px;height:38px;color:var(--purple);cursor:pointer;border-radius:50%;place-items:center;transition:background .2s,transform .15s;display:grid}.theme-toggle:hover{background:var(--ctrl-hover);transform:translateY(-1px)}.theme-toggle svg{width:19px;height:19px}.page-main{scroll-snap-type:y mandatory;scroll-behavior:smooth;flex:1;overflow-y:auto}.page-section{scroll-snap-align:start;flex-direction:column;justify-content:center;align-items:center;min-height:100%;margin:0 auto;padding:40px 20px;display:flex}.recorder{aspect-ratio:3/2;perspective:1600px;max-width:90vw;height:min(360px,65vh);position:relative}.flip-inner{width:100%;height:100%;transform-style:preserve-3d;transition:transform .4s cubic-bezier(.4,.15,.2,1);position:relative}.flip-inner.flipped{transform:rotateY(180deg)}.face{background-color:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--card-shadow);backface-visibility:hidden;border-radius:24px;width:100%;height:100%;padding:30px 34px 32px;overflow:hidden}.face--front{background-position:50%;background-size:cover;flex-direction:column;justify-content:space-between;display:flex;position:relative}.face--back{padding:0;position:absolute;inset:0;overflow:hidden;transform:rotateY(180deg)}.face--postcard{background-color:var(--card-bg);justify-content:center;align-items:center;display:flex}.postcard-image{object-fit:cover;border-radius:24px;width:100%;height:100%}.postcard-placeholder{color:var(--muted);font-size:.85rem}.flip-btn{z-index:10;border:1px solid var(--card-border);background:var(--ctrl-bg);width:30px;height:30px;color:var(--purple);cursor:pointer;border-radius:50%;place-items:center;transition:all .2s;display:grid;position:absolute;top:14px;right:14px}.flip-btn:hover{background:var(--ctrl-hover);transform:scale(1.08)}.flip-btn.hidden{opacity:0;pointer-events:none;transform:scale(.4)}.recorder-statusbar{color:var(--muted);justify-content:center;align-items:center;gap:10px;padding-bottom:22px;font-size:.85rem;display:flex}.status-dot{background:var(--dot);border-radius:50%;width:9px;height:9px}.status-dot.recording{background:#ff5d6c;animation:1s infinite pulse;box-shadow:0 0 0 4px #ff5d6c2e}.recorder-body{flex:1;justify-content:center;align-items:center;display:flex}.record-btn{cursor:pointer;color:#fff;background:radial-gradient(circle at 50% 35%,#7b6cf0 0%,#5b4ad4 60%,#4a3bbf 100%);border:none;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:clamp(90px,20vh,150px);height:clamp(90px,20vh,150px);transition:transform .15s;display:flex;position:relative;box-shadow:0 12px 30px #3c2d9680,inset 0 -6px 14px #0000002e}.record-btn:hover{transform:translateY(-2px)}.record-btn:active{transform:translateY(0)scale(.98)}.record-btn-glow{opacity:.55;pointer-events:none;background:radial-gradient(circle,#8a7df066,#0000 68%);border-radius:50%;position:absolute;inset:-18px}.record-btn.is-recording .record-btn-glow{opacity:1;animation:1.4s ease-in-out infinite glow}.mic-icon{width:34px;height:34px}.record-label{letter-spacing:.8px;font-size:.72rem;font-weight:600}.record-time{font-variant-numeric:tabular-nums;opacity:.9;font-size:.78rem}.recorder-controls{justify-content:center;align-items:center;gap:18px;display:flex}.ctrl-btn{background:var(--ctrl-bg);width:36px;height:36px;color:var(--purple);cursor:pointer;border:none;border-radius:50%;place-items:center;transition:background .2s,transform .15s;display:grid}.ctrl-btn:hover{background:var(--ctrl-hover);transform:translateY(-1px)}.ctrl-btn--primary{background:var(--purple);color:#fff}.ctrl-btn--primary:hover{background:var(--purple-light)}.ctrl-btn svg{width:18px;height:18px}.ctrl-vol{place-items:center;display:grid;position:relative}.vol-popover{transform-origin:bottom;background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--card-shadow);opacity:0;visibility:hidden;z-index:5;border-radius:12px;padding:14px 10px;transition:opacity .18s,transform .18s,visibility .18s;position:absolute;bottom:calc(100% + 12px);left:50%;transform:translate(-50%)scale(.9)}.vol-popover.open{opacity:1;visibility:visible;transform:translate(-50%)scale(1)}.vol-slider{appearance:none;writing-mode:vertical-lr;background:var(--ctrl-hover);cursor:pointer;direction:rtl;border-radius:6px;width:6px;height:90px}.vol-slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--purple);border:2px solid #fff;border-radius:50%;width:16px;height:16px;box-shadow:0 1px 4px #5b4ad480}.vol-slider::-moz-range-thumb{background:var(--purple);border:2px solid #fff;border-radius:50%;width:16px;height:16px}.vol-slider::-moz-range-track{background:var(--ctrl-hover);border-radius:6px;width:6px;height:90px}.faq-section{width:100%;max-width:680px;margin:0 auto}.faq-title{color:var(--purple);text-align:center;margin-bottom:28px;font-size:1.5rem;font-weight:700}.faq-list{flex-direction:column;gap:20px;display:flex}.faq-item{border-bottom:1px solid var(--line);padding-bottom:18px}.faq-item dt{margin-bottom:6px;font-size:.95rem;font-weight:600}.faq-item dd{color:var(--muted);font-size:.88rem;line-height:1.5}.site-footer{border-top:1px solid var(--line);padding:26px 0 32px}.footer-inner{justify-content:space-between;align-items:center;gap:20px;max-width:1100px;margin:0 auto;padding:0 64px;display:flex}.footer-brand{font-size:1.05rem;font-weight:600}.footer-nav{gap:30px;display:flex}.footer-nav a{opacity:.85;font-size:.9rem;transition:opacity .2s,color .2s}.footer-nav a:hover{opacity:1;color:var(--purple)}.footer-social{gap:16px;display:flex}.footer-social a{width:26px;height:26px;color:var(--purple);place-items:center;transition:transform .15s,color .2s;display:grid}.footer-social a:hover{color:var(--purple-light);transform:translateY(-2px)}.footer-social svg{width:22px;height:22px}@keyframes pulse{0%,to{opacity:1}50%{opacity:.35}}@keyframes glow{0%,to{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}@media (width<=640px){.site-header{flex-wrap:wrap;gap:14px;padding:20px 24px}.main-nav{gap:22px}.footer-inner{text-align:center;flex-direction:column;padding:0 24px}}.new-btn[data-v-e97772f2]{width:180px;height:180px}.page-msg[data-v-d73740d6]{color:var(--muted);font-size:.9rem}