*{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-attachment:scroll;background-color:#0f141e;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;background:radial-gradient(ellipse 800px 80vh at center 350px,#788cb4cc,#3c507899,#1e283ce6 60%,#0f141e),linear-gradient(135deg,#0f141e,#1a2332,#2d4a6b,#1a2332,#0f141e)}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-size:2.8rem;font-weight:700;margin:25px 0 5px;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);letter-spacing:0px;font-family:Space Grotesk,Helvetica Neue,sans-serif;position:relative;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}.description{margin:100px 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-size:1.4rem;font-weight:400;margin:0 0 20px;text-shadow:0 0 15px rgba(180,200,255,.5),0 1px 3px rgba(0,0,0,.4);letter-spacing:1px;font-family:Space Grotesk,Helvetica Neue,sans-serif}.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-basis:48%;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-icon{filter:drop-shadow(0 1px 2px rgba(0,0,0,.3));flex-shrink:0;font-size:1.2rem;margin-right:12px}.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)}@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}.tips-grid{gap:10px;grid-template-columns:1fr}.tip-item{padding:10px 12px}.tip-text{font-size:.8rem}}@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-icon{font-size:1rem;margin-right:8px}.tip-text{font-size:.75rem;line-height:1.3}}.music-credits{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(135deg,#6478a00f,#3c50780a);border:1px solid rgba(120,140,180,.1);border:1px solid rgba(108,92,171,.05);border-radius:8px;color:#3a3a3a;display:flex;flex-basis:100%;flex-wrap:wrap;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;font-size:14px;justify-content:center;line-height:1.6;margin:50px 0;max-width:700px;padding:20px 12px;text-align:center;transition:all .2s ease;z-index:10}.music-credits .credits-section{display:flex;flex-wrap:wrap;justify-content:space-between;padding:0;margin:0}.music-credits .credit-item{font-size:14px;line-height:1;color:#3a3a3a;flex-basis:100%;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;margin-bottom:8px;padding:20px 12px;border-radius:8px;text-align:center;transition:all .2s ease;border:1px solid rgba(108,92,171,.05)}.music-credits h3{color:#dce6fff2;font-size:1.4rem;font-weight:400;margin:0 0 20px;text-align:center;text-shadow:0 0 15px rgba(180,200,255,.5),0 1px 3px rgba(0,0,0,.4);letter-spacing:1px;font-family:Space Grotesk,Helvetica Neue,sans-serif}.music-credits .credits-section::-webkit-scrollbar{width:6px}.music-credits .credits-section::-webkit-scrollbar-track{background:#6c5cab1a;border-radius:3px}.music-credits .credits-section::-webkit-scrollbar-thumb{background:#6c5cab4d;border-radius:3px}.music-credits .credits-section::-webkit-scrollbar-thumb:hover{background:#6c5cab80}.music-credits .credit-item:hover{background:#e0cbf90a;border-color:#6c5cab33;color:#c7bcff;transform:translateY(-1px)}.music-credits .credit-item a{color:#8b7bd8;display:block;font-weight:500;text-decoration:none;transition:all .2s ease}.music-credits .credit-item a:hover{text-decoration:none}.music-credits .playlist-info{display:none}@media screen and (max-width: 768px){.music-credits{margin:30px 20px;padding:24px 20px}.music-credits h3{font-size:20px;margin-bottom:20px}.music-credits .credit-item{font-size:14px;line-height:1.4;padding:15px 25px}.description{margin:50px auto}}@media screen and (max-width: 480px){.music-credits{border-radius:16px;margin:20px 16px;padding:20px 16px}.music-credits h3{font-size:18px}.music-credits .credit-item{margin-bottom:6px}}.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)}.ipod-container{align-items:center;display:flex;justify-content:center;perspective:1000px}.ipod{background:linear-gradient(145deg,#f8f8f8,#e6e6e6);border-radius:35px;box-shadow:0 20px 40px #0000004d,inset 0 2px 4px #ffffffe6,inset 0 -2px 4px #0000001a;border:2px solid #d8d8d8;transform-origin:center center;max-width:90vw;max-height:90vh;height:520px;position:relative;width:300px}.screen{background:#2a2a2a;border-radius:12px;box-shadow:inset 0 0 10px #000c,inset 0 2px 4px #000000e6,0 1px 2px #fff3;border:3px solid #1a1a1a;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{align-items:center;background:linear-gradient(180deg,#b8c5d1,#9bb0c4);border-radius:9px;color:#1a1a1a;display:flex;flex-direction:column;font-family:Lucida Grande,sans-serif;font-size:16px;font-weight:400;height:100%;justify-content:center;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);pointer-events:none;bottom:0;content:"";left:0;position:absolute;right:0;top:0}.controls{display:flex;justify-content:center;margin-top:20px;position:relative}.click-wheel{background:#c9c9c9;border-radius:50%;box-shadow:0 3px 8px #0003,inset 0 2px 4px #fffc,inset 0 -2px 4px #0000001a;border:1px solid #c8c8c8;touch-action:none;pointer-events:auto;height:200px;position:relative;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-radius:50%;box-shadow:0 3px 6px #0003,inset 0 1px 2px #fffc,inset 0 -1px 2px #0000001a;border:1px solid #d8d8d8;cursor:pointer;transition:all .1s ease;touch-action:manipulation;z-index:10;pointer-events:auto;height:50px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:50px}.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,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;transform:scale(1);transition:all .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}@keyframes menuGlow{0%,to{box-shadow:inset 0 0 15px #b4bef066,inset 0 0 30px #a0afe633}50%{box-shadow:inset 0 0 25px #dce6ffcc,inset 0 0 50px #c8d7ff80}}.menu{animation:menuGlow 6s ease-in-out infinite;background:#aab7fc;border-radius:9px;box-shadow:inset 0 0 20px #c8d2ff99,inset 0 0 40px #b4c3ff4d;display:none;flex-direction:column;height:100%;overflow:hidden;width:100%}.menu.active{display:flex}.menu-header{border-bottom:1px solid rgba(0,0,0,.15);color:#1a1a1a;flex-shrink:0;font-family:Lucida Grande,sans-serif;font-size:11px;font-weight:700;padding:8px 12px;position:relative;text-align:center;z-index:2}.menu-items{flex:1;-webkit-overflow-scrolling:touch;-ms-overflow-style:none;overflow-y:auto;padding:4px 0;scrollbar-width:none}.menu-items::-webkit-scrollbar{display:none}.menu-item{align-items:center;border-bottom:1px solid rgba(0,0,0,.08);color:#1a1a1a;cursor:pointer;display:flex;font-family:Lucida Grande,sans-serif;font-size:11px;min-height:20px;padding:6px 12px;touch-action:manipulation;transition:background-color .1s ease}.menu-item:hover,.menu-item.selected{background:#444d94;color:#bac5ff;cursor:pointer}.menu-item:last-child{border-bottom:none}.menu-item-icon{display:inline-block;flex-shrink:0;font-size:10px;margin-right:6px;text-align:center;width:12px}.now-playing,.credits,.message-display{animation:menuGlow 6s ease-in-out infinite;background:#aab7fc;border-radius:9px;box-shadow:inset 0 0 20px #c8d2ff99,inset 0 0 40px #b4c3ff4d;display:none;flex-direction:column;height:100%;overflow:hidden;padding:0;text-align:center;width:100%}.now-playing.active,.credits.active,.message-display.active{display:flex}.track-info{align-items:center;color:#333;display:flex;flex:1;flex-basis:100%;flex-direction:column;flex-wrap:wrap;font-size:8px;gap:2px;justify-content:center;margin-bottom:5px;margin-top:4px;padding:8px}.track-info .time-lapse .time-container{display:flex;gap:2px;margin-top:3px}.track-title{color:#1a1a1a;font-family:Lucida Grande,sans-serif;font-size:12px;font-weight:700;line-height:1.2;margin-bottom:4px;max-width:180px;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap}.track-artist{color:#333;font-family:Lucida Grande,sans-serif;font-size:10px;margin-bottom:12px;max-width:180px;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap}.progress-bar{background:#0003;border:1px solid rgba(0,0,0,.3);border-radius:1px;height:3px;margin:8px 0;overflow:hidden;width:80%}.progress-fill{background:#1a1a1a;border-radius:1px;height:100%;transition:width .1s ease;width:0%}.message-display h3{color:#1a1a1a;font-family:Lucida Grande,sans-serif;font-size:12px;font-weight:700;margin-bottom:8px}.message-display p{color:#333;font-family:Lucida Grande,sans-serif;font-size:9px;line-height:1.3;margin:0 auto;max-width:90%}.credits-header,.message-display h3{border-bottom:1px solid rgba(0,0,0,.15);color:#1a1a1a;flex-shrink:0;font-family:Lucida Grande,sans-serif;font-size:11px;font-weight:700;padding:8px 12px;text-align:center}.credits-content{flex:1;height:0;min-height:0;-webkit-overflow-scrolling:touch;-ms-overflow-style:none;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;padding:8px 12px;scrollbar-width:none}.credits-content .credits-section a{color:#5c5cab!important;text-decoration:none}.credits-content .credit-item{margin-bottom:6px}.credits-content::-webkit-scrollbar{display:none}.credits-section{margin-bottom:12px}.credits-section h4{color:#1a1a1a;font-family:Lucida Grande,sans-serif;font-size:10px;font-weight:700;margin-bottom:4px;text-align:left}.credit-item{color:#333;color:#5c5cab;font-family:Lucida Grande,sans-serif;font-size:9px;line-height:1.3;margin-bottom:2px;padding-left:2px;text-align:left;text-decoration:none}.loading{animation:pulse 2s ease-in-out infinite;color:#1a1a1a;font-family:Lucida Grande,sans-serif;font-size:16px}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}@media screen and (min-width: 769px){.credits-content{scrollbar-color:rgba(0,0,0,.3) transparent;scrollbar-width:thin}.credits-content::-webkit-scrollbar{display:block;width:6px}.credits-content::-webkit-scrollbar-track{background:#0000001a;border-radius:3px}.credits-content::-webkit-scrollbar-thumb{background:#0000004d;border-radius:3px}.credits-content::-webkit-scrollbar-thumb:hover{background:#00000080}}@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-bottom:calc(65vw * .083);margin-left:auto;margin-right:auto;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}.menu-button{top:0}.next-button{font-size:min(3.25vw,17px);right:0}.prev-button{font-size:min(3.25vw,17px);left:0}.play-button{bottom:0;font-size:min(3.25vw,17px)}.menu-header{font-size:10px;padding:6px 10px}.menu-item{font-size:10px;min-height:24px;padding:5px 10px}.track-title{font-size:11px;max-width:150px}.track-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-bottom:5.33vw;margin-left:auto;margin-right:auto;margin-top:7.41vw;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(3.25vw,16px);height:34.125vw;margin-bottom:5.2vw;margin-left:auto;margin-right:auto;margin-top:7.15vw;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-header{font-size:9px;padding:5px 8px}.menu-item{font-size:9px;min-height:22px;padding:4px 8px}.menu-item-icon{font-size:8px;margin-right:4px;width:10px}.track-title{font-size:10px;max-width:130px}.track-artist{font-size:8px;max-width:130px}.loading{font-size:12px}.now-playing,.message-display{padding:10px}.message-display h3{font-size:10px}.message-display 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-bottom:5.07vw;margin-left:auto;margin-right:auto;margin-top:7.215vw;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}}