:root{--cream: #fbf1e5;--ink: #211f1d;--design-width: 1648px;--stage-offset: max(0px, calc((100vw - var(--design-width)) / 2))}*{box-sizing:border-box}html,body{width:100%;min-width:320px;height:100%;margin:0}body{display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.72),transparent 42%),linear-gradient(115deg,#fff8ef,#fbe4cc 52%,#fffaf5);color:var(--ink);font-family:PingFang SC,Microsoft YaHei,Noto Sans SC,Arial,sans-serif}.viewport{display:grid;place-items:center;width:100vw;height:100vh;overflow:hidden}.stage{position:relative;width:100vw;height:100vh;overflow:hidden;isolation:isolate;background:var(--cream)}.stage:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#ffffff1a,#fff3e63d 64%,#ffffffc2),radial-gradient(circle at 45% 36%,rgba(255,235,190,.18),transparent 34%)}.asset{position:absolute;display:block;max-width:none;-webkit-user-select:none;user-select:none;pointer-events:none}.background{inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:center center}.logo-mark{top:45px;left:calc(var(--stage-offset) + 36px);z-index:50;width:200px;height:auto}.visual-zone,.login-zone{position:absolute;inset:0}.visual-zone{z-index:10}.halo{top:-18px;left:calc(var(--stage-offset) + 111px);z-index:8;width:923px;height:923px;mix-blend-mode:screen;opacity:.78;transform-origin:51% 45%;animation:haloBreath 6.6s ease-in-out infinite;will-change:transform,opacity}.waveform-window{position:absolute;top:326px;left:var(--stage-offset);z-index:13;width:1006px;height:192px;overflow:hidden;pointer-events:none;opacity:.94}.wave-line{position:absolute;top:96px;left:0;width:100%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,205,172,.34) 16%,rgba(255,119,57,.42) 54%,transparent);box-shadow:0 0 10px #ffc19938,0 0 20px #ff7c4033}.wave-bars{position:absolute;top:24px;left:92px;display:flex;align-items:center;gap:6px;width:max-content;height:144px;animation:waveformFlow 18s linear infinite}.wave-bars span{display:block;width:5px;height:calc(var(--h) * 2.32px);min-height:7px;border-radius:999px;background:linear-gradient(180deg,#fffffffa,#ff7436e6);box-shadow:0 0 12px #ffffff70,0 0 18px #ff924b4d;transform:scaleY(var(--pulse, 1));transform-origin:50% 50%;animation:barPulse 1.8s ease-in-out infinite;animation-delay:calc(var(--i) * -58ms)}.wave-bars span:nth-child(4n){background:#ffffffe6}.wave-bars span:nth-child(7n){width:6px}.person{top:108px;left:calc(var(--stage-offset) + 326px);z-index:20;width:724px;height:auto;filter:drop-shadow(0 30px 45px rgba(198,117,51,.12)) saturate(1.03);transform-origin:50% 64%;animation:personFloat 5.4s ease-in-out infinite;will-change:transform}.particle-field{position:absolute;inset:0;z-index:31;pointer-events:none;overflow:hidden;opacity:.72;animation:particleDrift 10s ease-in-out infinite alternate}.particle{position:absolute;left:calc(var(--x) * 1px);top:calc(var(--y) * 1px);width:calc(var(--s) * 1px);height:calc(var(--s) * 1px);border-radius:999px;background:#ffffffdb;box-shadow:0 0 calc(var(--s) * 1.8px) #ffffffb8,0 0 calc(var(--s) * 4px) #ffa65447;opacity:var(--o);animation:particleTwinkle 4.8s ease-in-out infinite;animation-delay:calc(var(--d) * -1s)}.particle.is-warm{background:#ffab63d1;box-shadow:0 0 12px #ffbe7873,0 0 28px #ff81402e}.steps-nav{position:absolute;top:166px;left:calc(var(--stage-offset) + 50px);z-index:35;display:grid;gap:24px;margin:0;padding:0;list-style:none;color:#43362f80;font-size:15px;font-weight:600;white-space:nowrap}.steps-nav:before{content:"";position:absolute;top:40px;left:20px;width:2px;height:116px;border-radius:999px;background:linear-gradient(#ff804c00,#ff804cdb 16% 84%,#ff804c00);opacity:.74}.steps-nav li{position:relative;display:flex;align-items:center;gap:16px}.step-icon{position:relative;z-index:1;display:grid;place-items:center;width:42px;height:42px;border-radius:999px;border:1px solid rgba(255,255,255,.82);background:radial-gradient(circle at 34% 24%,#fffffff5,#ffffff9e 52%,#fff8f07a),linear-gradient(145deg,#ffffffc7,#ffecda61);box-shadow:inset 0 1px #fffffff5,0 10px 24px #4a302114,0 0 0 1px #ffffff47;color:#3a322d6b;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.steps-nav .is-active .step-icon{background:radial-gradient(circle at 34% 25%,rgba(255,196,151,.95),transparent 38%),linear-gradient(145deg,#ff8a53,#f15725);border:1px solid rgba(255,255,255,.88);color:#fff;box-shadow:0 0 0 7px #ffffff9e,0 0 0 14px #ff6f3921,0 16px 30px #ff683047,inset 0 1px #ffffff6b}.step-headphones{color:#43362f8a}.step-wave{color:#ff7441}.step-icon:before{content:"";position:absolute;inset:10px;background:currentColor;-webkit-mask:var(--step-mask) center / contain no-repeat;mask:var(--step-mask) center / contain no-repeat}.step-icon:after{content:"";position:absolute;inset:6px;border:1px solid rgba(255,255,255,.68);border-radius:inherit;opacity:.72}.steps-nav .is-active .step-icon:after{inset:7px;border-color:#ffffff57;box-shadow:inset 0 0 12px #ffffff2e;opacity:1}.step-headphones{--step-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13v-1a8 8 0 0 1 16 0v1'/%3E%3Cpath d='M4 13.5A2.5 2.5 0 0 1 6.5 11H8v7H6.5A2.5 2.5 0 0 1 4 15.5v-2Z'/%3E%3Cpath d='M20 13.5A2.5 2.5 0 0 0 17.5 11H16v7h1.5a2.5 2.5 0 0 0 2.5-2.5v-2Z'/%3E%3C/svg%3E")}.step-headset{--step-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13v-1a8 8 0 0 1 16 0v1'/%3E%3Cpath d='M4 13.5A2.5 2.5 0 0 1 6.5 11H8v7H6.5A2.5 2.5 0 0 1 4 15.5v-2Z'/%3E%3Cpath d='M20 13.5A2.5 2.5 0 0 0 17.5 11H16v6'/%3E%3Cpath d='M16 19h-2.2a1.8 1.8 0 0 1-1.8-1.8V17'/%3E%3Cpath d='M10 17h2'/%3E%3C/svg%3E")}.step-wave{--step-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round'%3E%3Cpath d='M4 14v-4'/%3E%3Cpath d='M8 17V7'/%3E%3Cpath d='M12 20V4'/%3E%3Cpath d='M16 17V7'/%3E%3Cpath d='M20 14v-4'/%3E%3C/svg%3E")}.listen-card{position:absolute;top:646px;left:calc(var(--stage-offset) + 38px);z-index:42;width:460px;height:168px;display:grid;grid-template-columns:78px 1fr 52px;align-items:center;gap:22px;padding:24px 28px;border:1px solid rgba(255,255,255,.88);border-radius:26px;background:linear-gradient(118deg,#ffffffb8,#fffaf47a),radial-gradient(circle at 78% 16%,rgba(255,255,255,.72),transparent 34%);box-shadow:0 20px 42px #59341b24,inset 0 1px #ffffffe6;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.listen-card[hidden]{display:none}.gallery-stage{position:absolute;top:632px;left:calc(var(--stage-offset) + 38px);z-index:42;width:560px;height:220px;overflow:hidden;border-radius:24px;background:linear-gradient(118deg,#ffffff8a,#fff8f057),radial-gradient(circle at 74% 18%,rgba(255,255,255,.62),transparent 38%);box-shadow:0 22px 46px #59341b21,inset 0 1px #ffffffc7;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}.gallery-stage:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border:1px solid rgba(255,255,255,.72);border-radius:inherit}.gallery-stage:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(255,247,239,.42),transparent 16%,transparent 82%,rgba(255,247,239,.36)),linear-gradient(180deg,rgba(255,255,255,.16),transparent 30%)}#gallery-root{position:relative;z-index:0;width:100%;height:100%}.book-cover{width:78px;height:106px;border-radius:9px;background:linear-gradient(90deg,rgba(255,255,255,.18),transparent 30%),radial-gradient(circle at 50% 74%,rgba(122,78,32,.36),transparent 34%),linear-gradient(180deg,#f4ead7,#d5bd8d 58%,#9c723b);box-shadow:0 14px 24px #432d1b38,inset 0 0 0 1px #ffffff5c}.book-cover:before{content:"人间值得";display:block;width:42px;margin:10px auto 0;color:#463727c7;font-size:9px;font-weight:700;line-height:1.1;writing-mode:vertical-rl;letter-spacing:0}.listen-copy{min-width:0}.listen-copy h2{margin:0 0 10px;color:#24211f;font-size:20px;line-height:1.1;letter-spacing:0}.listen-copy p{margin:0 0 18px;color:#332c27b8;font-size:14px;line-height:1.2}.mini-wave{display:flex;align-items:center;gap:4px;width:214px;height:24px}.mini-wave span{width:3px;height:calc(var(--h) * 1px);min-height:3px;border-radius:999px;background:linear-gradient(180deg,#ff6a32,#ff9b62);opacity:.84;animation:barPulse 1.6s ease-in-out infinite;animation-delay:calc(var(--i) * -80ms)}.mini-wave span:nth-child(n+18){opacity:.42}.pause-button{position:relative;width:52px;height:52px;border:0;border-radius:999px;background:linear-gradient(145deg,#ffb065,#ff6931);box-shadow:0 12px 24px #ff672d52,inset 0 1px #ffffff75}.pause-button:before,.pause-button:after{content:"";position:absolute;width:4px;height:18px;border-radius:999px;background:#fff}.pause-button:before{transform:translate(-6px,-9px)}.pause-button:after{transform:translate(4px,-9px)}.login-zone{z-index:60;pointer-events:none;animation:loginFade .9s ease .18s both}.login-card{position:absolute;top:80px;right:calc(var(--stage-offset) + 68px);width:546px;height:786px;display:flex;flex-direction:column;align-items:stretch;padding:72px 48px 70px;border:1px solid rgba(255,255,255,.86);border-radius:30px;background:radial-gradient(circle at 50% 6%,rgba(255,255,255,.92),transparent 24%),linear-gradient(152deg,#ffffffd1,#fffaf4a8);box-shadow:0 26px 60px #492f1e29,inset 0 1px #ffffffe6;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:#211f1d;pointer-events:auto}.login-brand{display:flex;justify-content:center;align-items:center;gap:14px;margin-bottom:36px;letter-spacing:0}.brand-symbol{position:relative;display:inline-block;width:48px;height:48px;flex:0 0 48px;border-radius:12px;background:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2032'%20role='img'%20aria-label='喜拾集'%3e%3crect%20width='32'%20height='32'%20rx='9'%20fill='%23C2410C'/%3e%3cg%20fill='none'%20stroke='%23FFFDF8'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3e%3cpath%20d='M10.8%2019.6a5.1%205.1%200%200%201%200-7.2'/%3e%3cpath%20d='M12.7%2018.1a3.2%203.2%200%200%201%200-4.2'/%3e%3ccircle%20cx='16'%20cy='16'%20r='1.1'%20fill='%23FFFDF8'%20stroke='none'/%3e%3cpath%20d='M19.3%2013.9a3.2%203.2%200%200%201%200%204.2'/%3e%3cpath%20d='M21.2%2012.4a5.1%205.1%200%200%201%200%207.2'/%3e%3c/g%3e%3c/svg%3e") center / contain no-repeat}.brand-copy{display:flex;align-items:center;line-height:1}.brand-copy strong{color:#151312;font-size:30px;font-weight:900;letter-spacing:0}.login-card h1{margin:0;text-align:center;font-size:52px;line-height:1.12;font-weight:800;letter-spacing:0}.login-card h1 span{margin-left:11px;color:#f26535}.login-subtitle{margin:20px 0 42px;text-align:center;color:#3b322dad;font-size:17px;font-weight:600;line-height:1.4}.field{position:relative;display:flex;align-items:center;height:68px;margin-bottom:24px;border:1px solid rgba(125,108,98,.22);border-radius:14px;background:#ffffff8a;box-shadow:inset 0 1px 1px #ffffffd1,0 12px 28px #5437220a}.field[hidden]{display:none}.field:focus-within{border-color:#ff6f3973;box-shadow:0 0 0 4px #ff6f3914,inset 0 1px 1px #ffffffd1}.field input{width:100%;height:100%;border:0;outline:0;padding:0 54px;background:transparent;color:#2b2927;font:inherit;font-size:18px}.field input::placeholder{color:#544c465c}.field-icon{position:absolute;left:20px;top:50%;width:22px;height:22px;color:#2b2927b8;transform:translateY(-50%)}.user-icon:before,.user-icon:after,.lock-icon:before,.lock-icon:after,.eye-button:before,.eye-button:after{content:"";position:absolute}.user-icon:before{left:7px;top:1px;width:8px;height:8px;border:2px solid currentColor;border-radius:999px}.user-icon:after{left:2px;bottom:0;width:18px;height:10px;border:2px solid currentColor;border-bottom:0;border-radius:14px 14px 0 0}.lock-icon:before{left:5px;top:1px;width:12px;height:11px;border:2px solid currentColor;border-bottom:0;border-radius:9px 9px 0 0}.lock-icon:after{left:2px;bottom:1px;width:18px;height:14px;border:2px solid currentColor;border-radius:4px}.eye-button{position:absolute;right:19px;top:50%;width:26px;height:22px;padding:0;border:0;background:transparent;color:#2b2927a6;transform:translateY(-50%)}.eye-button:before{left:2px;top:5px;width:20px;height:12px;border:2px solid currentColor;border-radius:50%;transform:rotate(-8deg)}.eye-button:after{left:2px;top:10px;width:24px;height:2px;border-radius:999px;background:currentColor;transform:rotate(42deg)}.login-options{display:flex;justify-content:space-between;align-items:center;margin:4px 2px 0;color:#2b2623eb;font-size:16px;font-weight:600}.login-options a{color:#ff5f2d;text-decoration:none}.remember{display:inline-flex;align-items:center;gap:9px}.remember input{appearance:none;position:relative;width:18px;height:18px;margin:0;border-radius:4px;background:#6f2c1b;box-shadow:inset 0 1px #ffffff47}.remember input:after{content:"";position:absolute;left:5px;top:2px;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.primary-login{margin-top:auto;height:68px;border:0;border-radius:14px;background:linear-gradient(145deg,#2f2925,#171513);color:#fff;font-size:22px;font-weight:700;letter-spacing:0;box-shadow:0 13px 24px #211a163d,inset 0 1px #ffffff14}@keyframes waveformFlow{0%{transform:translate(0)}to{transform:translate(-360px)}}@keyframes barPulse{0%,to{transform:scaleY(.74)}50%{transform:scaleY(1.08)}}@keyframes particleDrift{0%{transform:translate3d(-7px,4px,0) scale(1.01);opacity:.58}to{transform:translate3d(10px,-8px,0) scale(1.035);opacity:.8}}@keyframes particleTwinkle{0%,to{transform:translateZ(0) scale(.86);opacity:calc(var(--o) * .55)}50%{transform:translate3d(0,-8px,0) scale(1);opacity:var(--o)}}@keyframes haloBreath{0%{transform:translate3d(-10px,8px,0) rotate(-2.8deg) scale(.96);opacity:.58}45%{transform:translate3d(12px,-14px,0) rotate(3.2deg) scale(1.08);opacity:.9}to{transform:translate3d(-10px,8px,0) rotate(-2.8deg) scale(.96);opacity:.58}}@keyframes personFloat{0%{transform:translate3d(-5px,5px,0) rotate(-.35deg)}42%{transform:translate3d(7px,-16px,0) rotate(.55deg)}to{transform:translate3d(-5px,5px,0) rotate(-.35deg)}}@keyframes loginFade{0%{transform:translate3d(18px,0,0);opacity:0}to{transform:translateZ(0);opacity:1}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:1ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}@media(max-width:760px){body{display:block;place-items:initial;width:100vw;overflow-y:auto;overflow-x:hidden}.viewport,.stage{min-height:100vh;height:auto}.viewport{display:block;width:100vw;overflow:visible}.stage{display:flex;flex-direction:column;align-items:center;width:100vw;overflow-x:hidden;overflow-y:visible}.stage:before,.logo-mark,.halo,.waveform-window,.particle-field,.steps-nav,.listen-card,.gallery-stage{display:none!important}.background{position:fixed;inset:0;width:100vw;height:100vh;object-fit:cover}.visual-zone{position:static;inset:auto;order:2;width:100%}.person{position:relative;top:auto;left:50%;z-index:20;width:min(92vw,430px);margin:-2px 0 0;transform:translate(-50%);animation:none}.login-zone{position:relative;z-index:60;order:1;width:100%;min-height:auto;display:flex;justify-content:center;padding:22px 14px 0;pointer-events:none}.login-card{position:relative;top:auto;right:auto;width:min(calc(100vw - 28px),390px);height:auto;min-height:420px;padding:30px 24px 28px;border-radius:24px;pointer-events:auto}.login-brand{margin-bottom:18px}.brand-symbol{width:42px;height:42px;flex-basis:42px;border-radius:11px}.brand-copy strong{font-size:26px}.login-card h1{font-size:36px}.login-subtitle{margin:12px 0 24px;font-size:15px}.field{height:58px;margin-bottom:18px}.field input{font-size:16px}.login-options{font-size:14px}.primary-login{height:58px;margin-top:32px;font-size:18px}}.circular-gallery{width:100%;height:100%;overflow:hidden;cursor:grab}.circular-gallery:active{cursor:grabbing}.circular-gallery canvas{display:block;width:100%;height:100%}