@import"https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap";*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}body{font-family:Playfair Display,serif;background:#b5c4a1;background-image:radial-gradient(ellipse at 20% 50%,rgba(160,140,100,.12) 0%,transparent 60%),radial-gradient(ellipse at 80% 30%,rgba(120,110,80,.1) 0%,transparent 50%),radial-gradient(ellipse at 50% 80%,rgba(100,120,80,.08) 0%,transparent 40%);min-height:100vh;overflow-x:hidden;position:relative}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at center,transparent 50%,rgba(60,50,30,.2) 100%);pointer-events:none;z-index:100}body:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");pointer-events:none;z-index:99}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#a3b18a}::-webkit-scrollbar-thumb{background:#6b5744;border-radius:4px}.music-box-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:2rem;user-select:none;-webkit-user-select:none}.title{font-family:Playfair Display,serif;font-size:2.5rem;color:#4a3728;text-shadow:1px 1px 2px rgba(0,0,0,.15);margin-bottom:.3rem;letter-spacing:.05em}.subtitle{font-family:Playfair Display,serif;font-size:1.05rem;color:#6b5744;font-style:italic;margin-bottom:2rem;opacity:.85}.music-box{position:relative;width:440px;display:flex;flex-direction:column;align-items:center}.gallery-window{width:340px;height:340px;background:#fdf6ec;border-radius:16px;border:6px solid #8b6914;box-shadow:inset 0 2px 12px #0003,0 4px 12px #00000026,0 0 0 3px #a67c00,0 0 0 6px #6b4f12;overflow:hidden;position:relative;z-index:2}.gallery-frame{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:15px}.gallery-image{width:100%;height:100%;object-fit:cover;border-radius:8px;filter:sepia(.15) saturate(1.1);animation:fadeIn .6s ease-in-out}.gallery-label{text-align:center;font-family:Playfair Display,serif;font-size:.9rem;color:#6b5744;font-style:italic;padding-bottom:5px}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.box-ornament{position:absolute;top:120px;font-size:1.8rem;color:#a67c00;z-index:3;text-shadow:1px 1px 2px rgba(0,0,0,.3)}.box-ornament.left{left:20px;transform:scaleX(-1)}.box-ornament.right{right:20px}.box-body{width:380px;height:130px;background:linear-gradient(180deg,#a0744a,#8b6239 15%,#7a5530,#6b4a28 85%,#5c3f20);border-radius:0 0 18px 18px;position:relative;box-shadow:0 8px 24px #00000059,inset 0 2px #ffffff14,inset 0 -2px 6px #0000004d;z-index:1;margin-top:-4px}.box-texture{position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(90deg,transparent,transparent 8px,rgba(0,0,0,.03) 8px,rgba(0,0,0,.03) 9px);border-radius:0 0 18px 18px}.box-band{position:absolute;left:10px;right:10px;height:4px;background:linear-gradient(90deg,#a67c00,#d4a830,#a67c00);border-radius:2px;box-shadow:0 1px 2px #0003}.box-band.top{top:15px}.box-band.bottom{bottom:15px}.box-keyhole{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:20px;height:28px;background:#1a1a1a;border-radius:50% 50% 3px 3px;border:2px solid #a67c00;box-shadow:0 0 6px #00000080}.box-keyhole:before{content:"";position:absolute;bottom:2px;left:50%;transform:translate(-50%);width:6px;height:10px;background:#1a1a1a;border-radius:0 0 2px 2px}.box-keyhole-inner{position:absolute;top:5px;left:50%;transform:translate(-50%);width:8px;height:8px;border-radius:50%;background:radial-gradient(circle,#333 40%,#111)}.crank-area{position:absolute;right:-50px;top:370px;width:80px;height:80px;z-index:5}.crank-base{position:absolute;left:0;top:50%;transform:translateY(-50%);width:28px;height:28px;background:radial-gradient(circle at 35% 35%,#d4a830,#8b6914);border-radius:50%;box-shadow:0 2px 6px #0006,inset 0 1px 2px #ffffff4d;z-index:2}.crank-base-inner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:10px;height:10px;background:radial-gradient(circle,#5c3f20,#3a2510);border-radius:50%;border:1px solid #a67c00}.crank-handle{position:absolute;left:14px;top:50%;transform-origin:0 0;cursor:grab;z-index:1;transition:filter .2s}.crank-handle:active,.crank-handle.active{cursor:grabbing;filter:brightness(1.1)}.crank-arm{width:55px;height:8px;background:linear-gradient(180deg,#c9a84c,#a67c00,#8b6914);border-radius:4px;box-shadow:0 2px 4px #0000004d,inset 0 1px #fff3;margin-top:-4px}.crank-knob{position:absolute;right:-14px;top:-10px;width:24px;height:24px;background:radial-gradient(circle at 35% 35%,#e8c84a,#a67c00,#8b6914);border-radius:50%;box-shadow:0 2px 8px #0006,inset 0 2px 4px #ffffff4d}.crank-knob-shine{position:absolute;top:4px;left:5px;width:8px;height:6px;background:#fff6;border-radius:50%;transform:rotate(-30deg)}.notes-container{position:absolute;top:0;left:-30px;width:100%;height:100%;pointer-events:none;z-index:10}.floating-note{position:absolute;font-size:1.5rem;color:#a67c00;opacity:0;text-shadow:0 1px 3px rgba(0,0,0,.2)}.floating-note.n1{animation:floatNote1 2s ease-in-out infinite;left:10%}.floating-note.n2{animation:floatNote2 2.3s ease-in-out .3s infinite;left:85%}.floating-note.n3{animation:floatNote3 1.8s ease-in-out .6s infinite;left:5%}.floating-note.n4{animation:floatNote4 2.1s ease-in-out .9s infinite;left:90%}@keyframes floatNote1{0%{transform:translateY(50px) rotate(0);opacity:0}20%{opacity:1}to{transform:translateY(-80px) rotate(20deg);opacity:0}}@keyframes floatNote2{0%{transform:translateY(60px) rotate(0);opacity:0}20%{opacity:1}to{transform:translateY(-90px) rotate(-15deg);opacity:0}}@keyframes floatNote3{0%{transform:translateY(40px) rotate(0);opacity:0}25%{opacity:1}to{transform:translateY(-70px) rotate(25deg);opacity:0}}@keyframes floatNote4{0%{transform:translateY(55px) rotate(0);opacity:0}20%{opacity:1}to{transform:translateY(-85px) rotate(-20deg);opacity:0}}.hint{font-family:Playfair Display,serif;font-size:1rem;color:#6b5744;margin-top:2rem;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.7}50%{opacity:1}}@media (max-width: 500px){.title{font-size:1.8rem}.music-box{width:320px}.gallery-window{width:220px;height:220px}.box-body{width:270px;height:100px}.crank-area{right:-40px;top:245px}}.app{min-height:100vh;display:flex;align-items:center;justify-content:center}