:root{--bg:#11100f;--panel:#171513;--cream:#eee5d5;--muted:#a9a199;--line:#34302c}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:#f4f0e9;font-family:Arial,Helvetica,sans-serif;padding-bottom:92px}
main{width:100%}
.hero{max-width:650px;margin:0 auto;padding:38px 24px 0}
.hero img,.message img{display:block;width:100%;height:auto}
.message{max-width:560px;margin:30px auto 0;padding:0 24px}
.collection{max-width:961px;margin:40px auto 0;padding:0 24px}
.collection-head{display:flex;justify-content:center;margin-bottom:24px}
.play-all{border:1px solid #6c6258;background:transparent;color:var(--cream);padding:11px 24px;letter-spacing:.18em;font-size:12px;cursor:pointer}
.play-all:hover{background:#eee5d5;color:#11100f}
.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.cover{position:relative;aspect-ratio:1;overflow:hidden;background:#222;cursor:pointer;border:1px solid #2c2926;transition:transform .18s ease,border-color .18s ease}
.cover img{width:100%;height:100%;display:block;object-fit:cover}
.cover:hover{transform:translateY(-2px)}
.cover::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,0);transition:background .18s ease;pointer-events:none}
.cover:hover::after{background:rgba(0,0,0,.28)}
.hover-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2;opacity:0;transition:opacity .18s ease;color:white;font-weight:600;letter-spacing:.14em;font-size:14px;text-shadow:0 2px 10px #000}
.cover:hover .hover-play{opacity:1}
.cover.active{border-color:var(--cream)}
.cover.active .hover-play{opacity:0}
footer{text-align:center;padding:86px 24px 48px;color:var(--muted);font-size:13px;line-height:1.8}
.footer-name{color:var(--cream);font-family:Georgia,"Times New Roman",serif;font-size:25px;letter-spacing:.18em;margin-bottom:8px}
.contact-placeholder{font-style:italic;color:#77716b}
.copyright{margin-top:18px;font-size:11px}
.player{position:fixed;left:0;right:0;bottom:0;z-index:20;min-height:78px;background:rgba(17,16,15,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;padding:12px max(18px,calc((100vw - 1380px)/2))}
.icon-button,.main-play{border:0;background:transparent;color:#fff;cursor:pointer}
.icon-button{font-size:31px;width:34px}
.main-play{width:42px;height:42px;border:1px solid #6c6258;border-radius:50%;font-size:15px}
.now{min-width:0;flex:1;margin-left:8px}
.now-title{font-family:Georgia,"Times New Roman",serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:16px;color:var(--cream);margin-bottom:7px}
.timeline{display:grid;grid-template-columns:38px 1fr 38px;align-items:center;gap:8px;font-size:10px;color:var(--muted)}
#seek{width:100%;accent-color:#d9cfbe}
@media(max-width:900px){.gallery{grid-template-columns:repeat(3,1fr);gap:16px}.hero{padding:22px 24px 0}.message,.collection{padding-left:24px;padding-right:24px}.message{margin-top:26px}.collection{margin-top:36px}}
@media(max-width:620px){body{padding-bottom:86px}.gallery{grid-template-columns:repeat(2,1fr);gap:12px}.hover-play{display:none}.message{margin-top:18px}.collection{margin-top:28px}.player{padding:10px 10px}.icon-button{width:26px;font-size:26px}.main-play{width:38px;height:38px}.now-title{font-size:14px}.timeline{grid-template-columns:32px 1fr 32px;gap:4px}}

.contact-email{color:var(--cream);text-decoration:none}.contact-email:hover{text-decoration:underline}