*{box-sizing:border-box;margin:0;padding:0}html{background-color:#0f141e;height:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{align-items:center;background-color:#0f141e;background:radial-gradient(ellipse 800px 80vh at center 350px,#788cb4cc,#3c507899,#1e283ce6 60%,#0f141e),linear-gradient(135deg,#0f141e,#1a2332,#2d4a6b,#1a2332,#0f141e);background-attachment:scroll;background-repeat:no-repeat;background-size:100% 100%,100% 100%;display:flex;flex-direction:column;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;justify-content:center;min-height:100vh;min-height:-webkit-fill-available;overflow-x:hidden;padding:env(safe-area-inset-top,20px) env(safe-area-inset-right,20px) env(safe-area-inset-bottom,20px) env(safe-area-inset-left,20px);position:relative;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}body:before{bottom:0;content:"";left:0;mask:linear-gradient(to bottom,white 0%,white 40%,transparent 60%);-webkit-mask:linear-gradient(to bottom,white 0%,white 40%,transparent 60%);pointer-events:none;position:fixed;right:0;top:0;z-index:0;background:repeating-linear-gradient(0deg,transparent 0px,transparent 19px,rgba(100,120,160,.15) 19px,rgba(100,120,160,.15) 20px),repeating-linear-gradient(90deg,transparent 0px,transparent 19px,rgba(100,120,160,.15) 19px,rgba(100,120,160,.15) 20px),repeating-linear-gradient(45deg,transparent 0px,transparent 39px,rgba(140,160,200,.08) 39px,rgba(140,160,200,.08) 40px)}.site-header{margin-bottom:50px;text-align:center;z-index:10}.logo{color:#fffffff2;font-family:Space Grotesk,Helvetica Neue,sans-serif;font-size:2.8rem;font-weight:700;letter-spacing:0;margin:25px 0 5px;position:relative;text-shadow:0 0 20px rgba(180,200,255,.6),0 0 40px rgba(160,180,230,.3),0 2px 4px rgba(0,0,0,.3);z-index:3}.tagline{color:#c8d2ffcc;font-size:.9rem;font-weight:200;letter-spacing:1px;margin:0;text-shadow:0 1px 2px rgba(0,0,0,.3);text-transform:lowercase}.ipod-container{align-items:center;display:flex;justify-content:center;perspective:1000px}.ipod{background:linear-gradient(145deg,#f8f8f8,#e6e6e6);border:2px solid #d8d8d8;border-radius:35px;box-shadow:0 20px 40px #0000004d,inset 0 2px 4px #ffffffe6,inset 0 -2px 4px #0000001a;height:520px;max-height:90vh;max-width:90vw;position:relative;transform-origin:center center;width:300px}.screen{background:#2a2a2a;border:3px solid #1a1a1a;border-radius:12px;box-shadow:inset 0 0 10px #000c,inset 0 2px 4px #000000e6,0 1px 2px #fff3;height:160px;margin:40px auto 30px;position:relative;width:220px}.screen:before{background:linear-gradient(145deg,#333,#1a1a1a);border-radius:15px;bottom:-5px;content:"";left:-5px;position:absolute;right:-5px;top:-5px;z-index:-1}.screen-content{background:linear-gradient(180deg,#a8b0d0,#8e9ac4);border-radius:9px;color:#1a1a1a;display:flex;flex-direction:column;font-family:Lucida Grande,Geneva,Helvetica Neue,sans-serif;font-size:11px;height:100%;overflow:hidden;position:relative;width:100%}.screen-content:before{background:repeating-linear-gradient(0deg,transparent 0px,transparent 1px,rgba(0,0,0,.03) 1px,rgba(0,0,0,.03) 2px);bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:50}.status-bar{align-items:center;background:linear-gradient(180deg,#5560a8,#454f96);border-bottom:1px solid rgba(0,0,0,.2);color:#e8ecff;display:flex;flex-shrink:0;font-size:10px;font-weight:700;justify-content:space-between;padding:4px 8px}.status-play{align-items:center;display:flex;width:20px}.status-play svg{display:block}.status-title{flex:1;font-weight:700;text-align:center}.status-battery{align-items:center;display:flex;justify-content:flex-end;width:20px}.status-battery svg{display:block}.menu{display:none;flex-direction:column;height:100%;overflow:hidden;position:relative;width:100%}.menu.active{display:flex}.menu-items{flex:1;-webkit-overflow-scrolling:touch;-ms-overflow-style:none;overflow-y:auto;scrollbar-width:none}.menu-items::-webkit-scrollbar{display:none}.menu-item{align-items:center;border-bottom:1px solid rgba(0,0,0,.06);color:#1a1a1a;cursor:pointer;display:flex;font-size:11px;justify-content:space-between;min-height:22px;padding:5px 8px;touch-action:manipulation}.menu-item:last-child{border-bottom:none}.menu-item:hover,.menu-item.selected{background:linear-gradient(180deg,#5560a8,#454f96);color:#e0e5ff}.menu-item-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.menu-item-arrow{color:inherit;flex-shrink:0;font-size:10px;margin-left:4px;opacity:.7}.scroll-indicator{background:#00000014;border-radius:2px;bottom:4px;position:absolute;right:3px;top:24px;width:3px;z-index:10}.scroll-thumb{background:#00000059;border-radius:2px;min-height:8px;position:absolute;transition:top .1s ease;width:100%}.now-playing{display:none;flex-direction:column;height:100%;overflow:hidden;width:100%}.now-playing.active{display:flex}.np-content{align-items:center;display:flex;flex:1;flex-direction:column;justify-content:center;padding:4px 12px 8px}.np-track-number{color:#444;font-size:9px;margin-bottom:6px}.np-title{color:#1a1a1a;font-size:12px;font-weight:700;line-height:1.2;margin-bottom:2px;max-width:185px;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap}.np-artist{color:#444;font-size:10px;margin-bottom:12px;max-width:185px;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap}.np-progress{align-items:center;display:flex;gap:6px;width:92%}.np-elapsed,.np-total{color:#444;font-size:8px;min-width:24px}.np-elapsed{text-align:right}.np-total{text-align:left}.np-bar{background:#00000026;border:1px solid rgba(0,0,0,.25);border-radius:1px;flex:1;height:4px;position:relative}.np-bar-fill{background:#1a1a1a;border-radius:1px;height:100%;width:0%}.np-bar-diamond{background:#1a1a1a;height:6px;left:0%;position:absolute;top:50%;transform:translate(-50%,-50%) rotate(45deg);width:6px}.volume-display{display:none;flex-direction:column;height:100%;overflow:hidden;width:100%}.volume-display.active{display:flex}.volume-content{align-items:center;display:flex;flex:1;flex-direction:column;justify-content:center;padding:8px 12px}.volume-label{color:#1a1a1a;font-size:12px;font-weight:700;margin-bottom:14px}.volume-bar-row{align-items:center;display:flex;gap:6px;width:85%}.volume-icon{color:#444;flex-shrink:0;font-size:10px}.volume-bar{background:#00000026;border:1px solid rgba(0,0,0,.25);border-radius:2px;flex:1;height:6px;overflow:hidden}.volume-fill{background:#1a1a1a;border-radius:2px;height:100%;transition:width .1s ease;width:50%}.volume-percent{color:#444;font-size:9px;margin-top:10px}.credits{display:none;flex-direction:column;height:100%;overflow:hidden;width:100%}.credits.active{display:flex}.credits-content{flex:1;height:0;min-height:0;-webkit-overflow-scrolling:touch;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;padding:6px 10px;scrollbar-width:none}.credits-content::-webkit-scrollbar{display:none}.credits-section{margin-bottom:8px}.credits-section h4{color:#1a1a1a;font-size:10px;font-weight:700;margin-bottom:3px}.credit-item{color:#444;font-size:9px;line-height:1.4;margin-bottom:2px;padding-left:2px}.credit-item a{color:#2d50a0;text-decoration:none}.message-display{display:none;flex-direction:column;height:100%;overflow:hidden;width:100%}.message-display.active{display:flex}.msg-content{align-items:center;display:flex;flex:1;flex-direction:column;justify-content:center;padding:12px;text-align:center}.msg-content h3{color:#1a1a1a;font-size:12px;font-weight:700;margin-bottom:8px}.msg-content p{color:#444;font-size:9px;line-height:1.4;max-width:90%}.loading{align-items:center;color:#1a1a1a;display:flex;font-size:18px;font-weight:700;height:100%;justify-content:center;width:100%}.controls{display:flex;justify-content:center;margin-top:20px;position:relative}.click-wheel{background:#c9c9c9;border:1px solid #c8c8c8;border-radius:50%;box-shadow:0 3px 8px #0003,inset 0 2px 4px #fffc,inset 0 -2px 4px #0000001a;height:200px;pointer-events:auto;position:relative;touch-action:none;width:200px}.outer-ring{background:#c9c9c9;border-radius:50%;height:200px;left:0;position:absolute;top:0;width:200px}.center-button{background:linear-gradient(145deg,#f8f8f8,#e8e8e8);border:1px solid #d8d8d8;border-radius:50%;box-shadow:0 3px 6px #0003,inset 0 1px 2px #fffc,inset 0 -1px 2px #0000001a;cursor:pointer;height:50px;left:50%;pointer-events:auto;position:absolute;top:50%;touch-action:manipulation;transform:translate(-50%,-50%);transition:box-shadow .1s ease;width:50px;z-index:10}.center-button:active{box-shadow:inset 0 2px 4px #0003,0 1px 2px #0000001a}.control-button{align-items:center;color:#fff;cursor:pointer;display:flex;font-family:Lucida Grande,Geneva,sans-serif;font-size:10px;font-weight:700;justify-content:center;letter-spacing:.5px;pointer-events:auto;position:absolute;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:color .1s ease;-webkit-user-select:none;user-select:none;z-index:10}.control-button:active{color:#e7e7e7}.menu-button{background:transparent;border:2px solid transparent;height:30px;left:50%;min-height:44px;min-width:44px;pointer-events:auto;top:0;transform:translate(-50%);width:44px;z-index:15}.next-button{background:transparent;border:2px solid transparent;font-size:14px;height:44px;min-height:44px;min-width:44px;pointer-events:auto;right:0;top:50%;transform:translateY(-50%);width:30px;z-index:15}.prev-button{background:transparent;border:2px solid transparent;font-size:14px;height:44px;left:0;min-height:44px;min-width:44px;pointer-events:auto;top:50%;transform:translateY(-50%);width:30px;z-index:15}.play-button{background:transparent;border:2px solid transparent;bottom:0;font-size:14px;height:30px;left:50%;min-height:44px;min-width:44px;pointer-events:auto;transform:translate(-50%);width:44px;z-index:15}.description{margin:80px auto 50px;max-width:600px;padding:0 20px;text-align:center;z-index:10}.description p{color:#c8d2ffe6;font-size:.95rem;font-weight:300;line-height:1.6;margin:0;text-shadow:0 1px 2px rgba(0,0,0,.3)}.usage-tips{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(135deg,#6478a00f,#3c50780a);border:1px solid rgba(120,140,180,.1);border-radius:15px;margin-top:25px;max-width:700px;padding:20px;text-align:center;z-index:10}.tips-title{color:#dce6fff2;font-family:Space Grotesk,Helvetica Neue,sans-serif;font-size:1.4rem;font-weight:400;letter-spacing:1px;margin:0 0 20px;text-shadow:0 0 15px rgba(180,200,255,.5),0 1px 3px rgba(0,0,0,.4)}.tips-grid{display:flex;flex-wrap:wrap;gap:12px;margin-top:15px}.tip-item{align-items:center;background:linear-gradient(135deg,#788cb414,#50648c0d);border:1px solid rgba(150,170,200,.1);border-radius:10px;display:flex;flex:1 1 45%;padding:12px 16px;transition:all .3s ease}.tip-item:hover{background:linear-gradient(135deg,#8ca0c81f,#6478a014);border-color:#aabedc33;box-shadow:0 4px 12px #6478a026;transform:translateY(-1px)}.tip-text{color:#bec8e6e6;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:.85rem;font-weight:300;line-height:1.4;text-align:left;text-shadow:0 1px 2px rgba(0,0,0,.3)}.site-footer{background:transparent;color:#b4c3ffcc;margin:50px auto;text-align:center;z-index:10}.site-footer p{color:#a0aac8b3;font-size:.8rem;font-weight:300;margin:0}.site-footer a{color:#b4c3ffcc;text-decoration:none;transition:color .3s ease}.site-footer a:hover{color:#dce6ff;text-shadow:0 0 8px rgba(180,200,255,.5)}@media screen and (max-width: 768px){.usage-tips{margin:20px auto;max-width:90%;padding:15px}.tips-title{font-size:1.2rem;margin-bottom:15px}.tip-item{padding:10px 12px}.tip-text{font-size:.8rem}.description{margin:50px auto}}@media screen and (max-width: 480px){.usage-tips{margin:15px auto;padding:12px}.tips-title{font-size:1.1rem;margin-bottom:12px}.tip-item{padding:8px 10px}.tip-text{font-size:.75rem;line-height:1.3}}@media screen and (max-width: 1024px) and (orientation: portrait){.ipod{height:480px;width:260px}.screen{height:145px;margin:35px auto 25px;width:200px}.click-wheel,.outer-ring{height:185px;width:185px}.center-button{height:46px;width:46px}}@media screen and (max-width: 768px){body{padding:env(safe-area-inset-top,15px) env(safe-area-inset-right,15px) env(safe-area-inset-bottom,15px) env(safe-area-inset-left,15px)}.ipod{height:112.45vw;max-height:588px;max-width:340px;width:65vw}.screen{height:40.625vw;margin:7.15vw auto calc(65vw * .083);max-height:213px;max-width:255px;width:48.75vw}.click-wheel,.outer-ring{height:calc(65vw * .69);max-height:234px;max-width:234px;width:calc(65vw * .69)}.center-button{height:11.375vw;max-height:59px;max-width:59px;width:11.375vw}.control-button{font-size:min(2.145vw,11px);min-height:10.855vw;min-width:10.855vw}.next-button,.prev-button,.play-button{font-size:min(3.25vw,17px)}.menu-item{font-size:10px;min-height:22px;padding:4px 8px}.status-bar{font-size:9px;padding:3px 6px}.np-title{font-size:11px;max-width:150px}.np-artist{font-size:9px;max-width:150px}}@media screen and (max-width: 480px){body{padding:env(safe-area-inset-top,10px) env(safe-area-inset-right,10px) env(safe-area-inset-bottom,10px) env(safe-area-inset-left,10px)}.ipod{max-height:742px;max-width:408px;width:65vw}.screen{height:calc(65vw * .52);margin:7.41vw auto 5.33vw;max-height:212px;max-width:306px;width:48.75vw}.click-wheel,.outer-ring{height:44.2vw;max-height:278px;max-width:278px;width:44.2vw}.center-button{height:11.245vw;max-height:70px;max-width:70px;width:11.245vw}.control-button{font-size:min(1.885vw,12px);min-height:10.855vw;min-width:10.855vw}.next-button,.prev-button,.play-button{font-size:min(calc(65vw * .046),19px)}.loading{font-size:14px}}@media screen and (max-width: 375px){.ipod{border-radius:min(6.175vw,30px);max-height:582px;max-width:319px;width:65vw}.screen{border-radius:min(1.95vw,8px);height:34.125vw;margin:7.15vw auto 5.2vw;max-height:168px;max-width:239px;width:48.75vw}.click-wheel,.outer-ring{height:43.875vw;max-height:215px;max-width:215px;width:43.875vw}.center-button{height:11.375vw;max-height:56px;max-width:56px;width:11.375vw}.control-button{font-size:min(1.625vw,9px);min-height:10.855vw;min-width:10.855vw}.next-button,.prev-button,.play-button{font-size:min(2.73vw,16px)}.menu-item{font-size:9px;min-height:20px;padding:3px 6px}.status-bar{font-size:8px;padding:3px 5px}.np-title{font-size:10px;max-width:130px}.np-artist{font-size:8px;max-width:130px}.loading{font-size:12px}.msg-content h3{font-size:10px}.msg-content p{font-size:8px;max-width:130px}}@media screen and (max-width: 320px){.ipod{border-radius:min(calc(65vw * .092),25px);max-height:498px;max-width:272px;width:65vw}.screen{height:34.255vw;margin:7.215vw auto 5.07vw;max-height:143px;max-width:204px;width:48.75vw}.click-wheel,.outer-ring{height:calc(65vw * .667);max-height:181px;max-width:181px;width:calc(65vw * .667)}.center-button{height:11.57vw;max-height:48px;max-width:48px;width:11.57vw}.control-button{font-size:min(1.43vw,7px);min-height:10.855vw;min-width:10.855vw}.next-button,.prev-button,.play-button{font-size:min(2.405vw,12px)}}@media screen and (max-height: 500px) and (orientation: landscape){body{align-items:flex-start;padding-bottom:env(safe-area-inset-bottom,5px);padding-top:env(safe-area-inset-top,5px)}.ipod{height:90vh;max-height:450px;width:240px}.screen{height:120px;margin:20px auto 15px;width:180px}.click-wheel,.outer-ring{height:140px;width:140px}.center-button{height:35px;width:35px}}@media screen and (min-width: 1200px){.ipod{max-height:550px;max-width:300px}}@media screen and (-webkit-min-device-pixel-ratio: 2),screen and (min-resolution: 192dpi),screen and (min-resolution: 2dppx){.screen-content:before{background:repeating-linear-gradient(0deg,transparent 0px,transparent .5px,rgba(0,0,0,.02) .5px,rgba(0,0,0,.02) 1px)}}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.center-button:focus,.control-button:focus{outline:2px solid #666;outline-offset:2px}@media print{body{background:#fff}.ipod{border:2px solid #000;box-shadow:none}}