:root{
  --bg:#e9ebe8;
  --device:#f4f4f1;
  --screen:#dfe2df;
  --screen-dark:#cdd1ce;
  --ink:#202321;
  --muted:#707570;
  --line:#b8bdb9;
  --accent:#8d9690;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;color:var(--ink)}
body{background:var(--bg)}

.pd-player-page{position:relative;min-height:100vh;display:flex;justify-content:center;align-items:center;padding:44px 24px}

.site-back-link,.mute-button{position:fixed;z-index:1000;top:20px;height:34px;border:1px solid rgba(32,35,33,.22);background:rgba(244,244,241,.9);backdrop-filter:blur(8px);color:var(--ink);box-shadow:0 4px 14px rgba(0,0,0,.06);font-size:11px;letter-spacing:.08em}
.site-back-link{left:22px;padding:9px 13px;text-decoration:none;border-radius:17px}
.site-back-link:hover{background:#fff}
.mute-button{right:22px;width:34px;padding:0;border-radius:50%;cursor:pointer;font-size:14px;line-height:32px}
.mute-button:hover{background:#fff}

.mp3-device{position:relative;width:min(430px,92vw);background:var(--device);border:1px solid #c9cdca;border-radius:24px;box-shadow:0 24px 60px rgba(0,0,0,.14),inset 0 1px rgba(255,255,255,.9);padding:18px 18px 20px}
.mp3-top{height:32px;display:flex;align-items:center;justify-content:space-between;padding:0 8px;font-size:9px;letter-spacing:.14em;color:#626862}
.mp3-brand{font-weight:700}
.mp3-model{opacity:.65}

.mp3-screen{position:relative;height:340px;background:var(--screen);border:1px solid #aeb4b0;border-radius:8px;overflow:hidden;box-shadow:inset 0 2px 8px rgba(0,0,0,.08),0 1px rgba(255,255,255,.9)}
.mp3-screen.is-pressed{animation:screenPress .15s ease}
@keyframes screenPress{0%{filter:brightness(1)}45%{filter:brightness(.93)}100%{filter:brightness(1)}}
.screen-view{position:absolute;inset:0;display:none;padding:14px 16px}.screen-view.is-active{display:block}
.status-bar{display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:.1em;color:#515752;padding-bottom:10px;border-bottom:1px solid rgba(81,87,82,.2)}
.home-content{height:265px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.home-logo{font-size:40px;line-height:.92;font-weight:800;letter-spacing:-.06em}.home-subtitle{font-size:10px;line-height:1.5;color:#656b66;margin-top:16px;letter-spacing:.04em}
.screen-footer{position:absolute;left:16px;right:16px;bottom:10px;display:flex;justify-content:flex-start;font-size:8px;color:#666d67;letter-spacing:.08em}
.screen-footer span:first-child{display:inline-flex;align-items:center}
.screen-footer span:first-child::after{content:"●";font-size:5px;margin-left:7px;color:#737a75;line-height:1}
.screen-footer span:last-child{display:none}
.menu-list{margin-top:18px;display:flex;flex-direction:column;gap:8px;max-height:245px;overflow:auto;padding-right:4px}
.menu-item{display:grid;grid-template-columns:30px 1fr 20px;align-items:center;width:100%;min-height:52px;padding:8px 10px;border:1px solid transparent;background:transparent;text-align:left;color:var(--ink);cursor:pointer;border-radius:5px;transition:transform .08s ease,background .08s ease,box-shadow .08s ease}.menu-item.is-selected{background:rgba(255,255,255,.48);border-color:rgba(70,75,71,.25);box-shadow:inset 0 1px rgba(255,255,255,.65)}
.menu-item:active{transform:translateY(2px) scale(.99);background:rgba(255,255,255,.7);box-shadow:inset 0 2px 4px rgba(0,0,0,.06)}
.menu-item>span:first-child{font-size:9px;color:#6d746e}.menu-item b{display:block;font-size:11px;letter-spacing:.06em}.menu-item small{display:block;margin-top:4px;font-size:8px;color:#727972;letter-spacing:.02em}.menu-item>span:last-child{font-size:18px;color:#747b76;text-align:right}
.screen-hint{position:absolute;left:16px;right:16px;bottom:11px;font-size:8px;color:#717871;letter-spacing:.09em;text-align:center}
.album-view{height:260px;display:flex;align-items:center;gap:16px}.album-cover{width:170px;height:170px;flex:none;background:#cdd1ce;border:1px solid #adb3af;box-shadow:0 5px 12px rgba(0,0,0,.12);overflow:hidden}.album-cover img{width:100%;height:100%;display:block;object-fit:cover}.album-info{display:flex;flex-direction:column;gap:7px}.album-info strong{font-size:18px;line-height:1.05}.album-info span{font-size:9px;letter-spacing:.06em;color:#606760}.album-info small{font-size:9px;line-height:1.45;color:#6d746e;max-width:150px}.play-status{position:absolute;left:16px;right:16px;bottom:10px;display:flex;justify-content:space-between;font-size:8px;color:#666d67;letter-spacing:.08em}
.about-content{padding:35px 10px}.about-title{font-size:34px;font-weight:800;line-height:.9}.about-content p{font-size:11px;line-height:1.5;margin-top:24px}.about-content small{font-size:9px;color:#6d746e;line-height:1.5}
.mp3-controls{display:flex;align-items:center;justify-content:center;gap:30px;padding:22px 0 18px}.mp3-button{border:0;background:transparent;color:#555b56;font-size:12px;cursor:pointer;padding:8px;transition:transform .08s ease,opacity .08s ease}.mp3-button:active{transform:translateY(3px) scale(.9);opacity:.7}
.mp3-wheel{position:relative;width:124px;height:124px;border-radius:50%;border:1px solid #c0c5c1;background:#eef0ed;box-shadow:inset 0 3px 10px rgba(0,0,0,.08),0 4px 10px rgba(0,0,0,.1);cursor:pointer;transition:transform .08s ease,box-shadow .08s ease}.mp3-wheel:active{transform:scale(.96);box-shadow:inset 0 4px 12px rgba(0,0,0,.13),0 2px 5px rgba(0,0,0,.08)}
.mp3-button:focus-visible,.mp3-wheel:focus-visible,.menu-item:focus-visible{outline:1px solid rgba(90,97,91,.55);outline-offset:2px}
.mp3-wheel span{position:absolute;font-size:8px;color:#606760;letter-spacing:.04em;pointer-events:none}.wheel-menu{top:12px;left:50%;transform:translateX(-50%)}.wheel-left{left:12px;top:50%;transform:translateY(-50%);font-size:11px!important}.wheel-right{right:12px;top:50%;transform:translateY(-50%);font-size:11px!important}.wheel-bottom{bottom:12px;left:50%;transform:translateX(-50%);font-size:10px!important}.wheel-center{left:50%;top:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#e2e5e2;border:1px solid #c2c7c3;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.mp3-bottom{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;width:100%;padding:0 8px;font-size:8px;letter-spacing:.1em;color:#707670}.mp3-bottom span:nth-child(1){text-align:left}.mp3-bottom span:nth-child(2){text-align:center}.mp3-bottom span:nth-child(3){text-align:right}

@media(max-width:600px){.pd-player-page{padding:52px 14px 24px}.site-back-link{left:14px;top:12px}.mute-button{right:14px;top:12px}.mp3-device{width:min(430px,94vw)}.mp3-screen{height:330px}.album-cover{width:145px;height:145px}.mp3-controls{gap:20px}}