@import url(https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Noto+Sans+SC:wght@400;700&display=swap);
:root{--cs-shell:#2a2a2a;--cs-shell-light:#3a3a3a;--cs-label:#f0e8d0;--cs-tape:#5c3a1a;--cs-window:rgba(200,220,240,0.15);--cs-screw:#c8c8c8;--cs-ink:#1a1a1a;--cs-muted:#8a8a7a;--cs-accent:#cc2233;--cs-brand:#0066aa;--cs-mono:'JetBrains Mono','Consolas','Courier New',monospace;--cs-sans:'Noto Sans SC',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--cs-width:860px}
*{margin:0;padding:0;box-sizing:border-box}
body{background:#1a1a1a;color:var(--cs-ink);font-family:var(--cs-sans);font-size:15px;line-height:1.7}
a{color:var(--cs-brand);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.cs-page{max-width:var(--cs-width);margin:0 auto;min-height:100vh}
.cs-header{background:var(--cs-shell);padding:.75rem 1.25rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;border-bottom:2px solid var(--cs-screw)}
.cs-brand{font-family:var(--cs-mono);font-size:1.1rem;font-weight:700;color:var(--cs-screw);letter-spacing:.2em;text-transform:uppercase}
.cs-nav{display:flex;gap:.85rem;flex-wrap:wrap;align-items:center}
.cs-nav-item{font-family:var(--cs-mono);font-size:.75rem;color:var(--cs-screw);text-decoration:none;letter-spacing:.05em;text-transform:uppercase;transition:color .2s}
.cs-nav-item:hover{color:var(--cs-accent);text-decoration:none}
.cs-search{display:flex;gap:0}
.cs-search-input{border:1px solid var(--cs-shell-light);border-right:none;padding:.3rem .5rem;font-family:var(--cs-mono);font-size:.7rem;background:var(--cs-shell-light);color:var(--cs-screw);outline:0;width:100px;border-radius:2px 0 0 2px}
.cs-search-input::placeholder{color:#666}
.cs-search-input:focus{border-color:var(--cs-accent)}
.cs-search-btn{border:1px solid var(--cs-shell-light);background:var(--cs-accent);color:#fff;padding:.3rem .5rem;font-size:.65rem;cursor:pointer;border-radius:0 2px 2px 0}
.cs-search-btn:hover{background:#aa1a28}
.cs-cassette{margin:1.5rem auto;background:var(--cs-shell);border-radius:10px;padding:16px;position:relative;box-shadow:0 4px 20px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05)}
.cs-cassette::before{content:'';position:absolute;top:10px;left:10px;right:10px;bottom:10px;background:radial-gradient(circle 4px at 0 0,var(--cs-screw) 2px,transparent 2.5px),radial-gradient(circle 4px at 100% 0,var(--cs-screw) 2px,transparent 2.5px),radial-gradient(circle 4px at 0 100%,var(--cs-screw) 2px,transparent 2.5px),radial-gradient(circle 4px at 100% 100%,var(--cs-screw) 2px,transparent 2.5px);pointer-events:none;z-index:1}
.cs-side-mark{position:absolute;top:12px;left:50%;transform:translateX(-50%);font-family:var(--cs-mono);font-size:.6rem;font-weight:700;color:var(--cs-screw);letter-spacing:.15em;z-index:2}
.cs-label{background:var(--cs-label);border-radius:4px;padding:.75rem 1rem;margin-bottom:8px;position:relative;z-index:2}
.cs-label-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.5rem}
.cs-label-brand{font-family:var(--cs-mono);font-size:.55rem;font-weight:700;color:var(--cs-brand);letter-spacing:.15em;text-transform:uppercase}
.cs-label-type{font-family:var(--cs-mono);font-size:.5rem;color:var(--cs-muted);letter-spacing:.1em}
.cs-label-title{font-family:var(--cs-sans);font-size:1rem;font-weight:700;color:var(--cs-ink);text-align:center;margin-bottom:.35rem}
.cs-label-subtitle{font-family:var(--cs-mono);font-size:.55rem;color:var(--cs-muted);text-align:center;letter-spacing:.1em;margin-bottom:.5rem}
.cs-label-dolby{display:inline-block;font-family:var(--cs-mono);font-size:.45rem;font-weight:700;color:var(--cs-muted);border:1px solid var(--cs-muted);padding:0 3px;letter-spacing:.05em;margin-left:.5rem;vertical-align:middle}
.cs-tracklist{list-style:none;padding:0}
.cs-track{display:flex;justify-content:space-between;align-items:center;padding:.25rem .35rem;border-bottom:1px dotted #d0c8b0;cursor:pointer;transition:background .15s;text-decoration:none;color:var(--cs-ink)}
.cs-track:last-child{border-bottom:none}
.cs-track:hover{background:rgba(0,102,170,.08);text-decoration:none}
.cs-track-no{font-family:var(--cs-mono);font-size:.65rem;color:var(--cs-muted);width:20px;flex-shrink:0}
.cs-track-title{font-family:var(--cs-mono);font-size:.75rem;font-weight:700;color:var(--cs-ink);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 .5rem}
.cs-track-dur{font-family:var(--cs-mono);font-size:.6rem;color:var(--cs-muted);flex-shrink:0}
.cs-window{background:var(--cs-window);border:2px solid #444;border-radius:4px;height:80px;display:flex;align-items:center;justify-content:center;gap:40px;position:relative;overflow:hidden;margin-bottom:8px;z-index:2}
.cs-reel{width:50px;height:50px;border-radius:50%;border:3px solid var(--cs-tape);position:relative;animation:cs-spin 4s linear infinite}
.cs-reel::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:14px;height:14px;border-radius:50%;border:2px solid var(--cs-tape);background:var(--cs-shell)}
.cs-reel::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:6px;height:6px;border-radius:50%;background:var(--cs-tape)}
.cs-reel-inner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:22px;height:22px}
.cs-reel-inner::after,.cs-reel-inner::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--cs-tape)}
.cs-reel-inner::before{width:2px;height:100%}
.cs-reel-inner::after{width:100%;height:2px}
.cs-tape-line{position:absolute;bottom:12px;left:0;right:0;height:2px;background:var(--cs-tape);z-index:-1}
@keyframes cs-spin{from{transform:rotate(0)}
to{transform:rotate(360deg)}
}
.cs-bottom{display:flex;justify-content:space-between;align-items:center;padding:0 4px;z-index:2;position:relative}
.cs-bottom-left,.cs-bottom-right{font-family:var(--cs-mono);font-size:.5rem;color:#666;letter-spacing:.05em}
.cs-flip-btn{font-family:var(--cs-mono);font-size:.65rem;font-weight:700;color:var(--cs-screw);background:var(--cs-shell-light);border:1px solid #555;padding:.25rem .6rem;border-radius:2px;cursor:pointer;letter-spacing:.1em;text-transform:uppercase;transition:all .2s}
.cs-flip-btn:hover{background:var(--cs-accent);color:#fff;border-color:var(--cs-accent)}
.cs-playing{margin:1.5rem auto;background:var(--cs-label);border-radius:6px;padding:1.5rem;box-shadow:0 4px 20px rgba(0,0,0,.3);position:relative}
.cs-playing::before{content:'NOW PLAYING';position:absolute;top:-10px;left:50%;transform:translateX(-50%);font-family:var(--cs-mono);font-size:.55rem;font-weight:700;color:#fff;background:var(--cs-accent);padding:.15rem .6rem;letter-spacing:.15em;border-radius:2px}
.cs-playing-header{text-align:center;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid #d0c8b0}
.cs-playing-no{font-family:var(--cs-mono);font-size:.65rem;color:var(--cs-muted);letter-spacing:.1em;margin-bottom:.2rem}
.cs-playing-title{font-family:var(--cs-sans);font-size:1.5rem;font-weight:700;color:var(--cs-ink);line-height:1.3;margin-bottom:.3rem}
.cs-playing-meta{font-family:var(--cs-mono);font-size:.7rem;color:var(--cs-muted);display:flex;justify-content:center;gap:.75rem;flex-wrap:wrap}
.cs-playing-tags{display:flex;justify-content:center;flex-wrap:wrap;gap:.3rem;margin:.5rem 0 0}
.cs-tag{font-family:var(--cs-mono);font-size:.6rem;color:var(--cs-brand);border:1px solid var(--cs-brand);padding:.1rem .3rem;border-radius:1px;text-decoration:none;transition:all .2s}
.cs-tag:hover{background:var(--cs-brand);color:#fff;text-decoration:none}
.cs-lyrics{line-height:1.9;word-break:break-word;color:var(--cs-ink);font-size:15px}
.cs-lyrics p{margin-bottom:1rem;text-indent:2em}
.cs-lyrics img{display:block;margin:1.25rem auto;border-radius:2px;max-width:100%}
.cs-lyrics h1,.cs-lyrics h2,.cs-lyrics h3,.cs-lyrics h4{text-indent:0;margin:1.5rem 0 .5rem;font-family:var(--cs-sans);color:var(--cs-ink)}
.cs-lyrics blockquote{border-left:3px solid var(--cs-accent);padding-left:1rem;margin:1rem 0;color:var(--cs-muted)}
.cs-lyrics pre{background:#f5f2ec;padding:.75rem;overflow-x:auto;font-family:var(--cs-mono);font-size:.85rem;margin:1rem 0;border:1px solid #d0c8b0;border-radius:3px}
.cs-lyrics code{font-family:var(--cs-mono);background:#f5f2ec;padding:1px 4px;font-size:.9em}
.cs-lyrics ol,.cs-lyrics ul{padding-left:1.5rem;margin:.5rem 0;text-indent:0}
.cs-lyrics a{color:var(--cs-brand)}
.cs-detail-nav{display:flex;gap:.75rem;margin:1rem 0}
.cs-detail-next,.cs-detail-prev{flex:1;padding:.6rem .85rem;background:var(--cs-label);border:1px solid #d0c8b0;border-radius:3px;font-family:var(--cs-mono);font-size:.75rem;transition:box-shadow .2s}
.cs-detail-next:hover,.cs-detail-prev:hover{box-shadow:0 2px 8px rgba(0,0,0,.08)}
.cs-detail-nav a{font-weight:700;color:var(--cs-ink)}
.cs-detail-nav a:hover{color:var(--cs-brand)}
.cs-detail-nav-label{font-family:var(--cs-mono);font-size:.6rem;color:var(--cs-muted);display:block;margin-bottom:.15rem;letter-spacing:.08em}
.cs-comments{margin:0 auto 1.5rem;background:var(--cs-label);border:1px solid #d0c8b0;border-radius:4px;padding:1.25rem;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.cs-comments-title{font-family:var(--cs-mono);font-size:.85rem;font-weight:700;margin-bottom:.85rem;padding-bottom:.5rem;border-bottom:1px dashed #d0c8b0;letter-spacing:.08em}
.cs-comment-form{margin-bottom:.85rem}
.cs-form-row{display:flex;gap:.5rem}
.cs-form-row .cs-input{flex:1}
.cs-input{display:block;width:100%;padding:.45rem .55rem;margin-bottom:.45rem;font-family:var(--cs-sans);font-size:.9rem;border:1px solid #c8c0b0;border-radius:2px;background:#fff;outline:0;transition:border-color .2s}
.cs-input:focus{border-color:var(--cs-brand)}
.cs-input-sm{width:80px}
.cs-textarea{display:block;width:100%;padding:.45rem .55rem;margin-bottom:.45rem;font-family:var(--cs-sans);font-size:.9rem;border:1px solid #c8c0b0;border-radius:2px;background:#fff;outline:0;resize:vertical;min-height:80px;transition:border-color .2s}
.cs-textarea:focus{border-color:var(--cs-brand)}
.cs-form-actions{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.cs-vcode{cursor:pointer;border:1px solid #c8c0b0;border-radius:2px}
.cs-btn{padding:.45rem 1.1rem;font-family:var(--cs-mono);font-size:.75rem;font-weight:700;background:var(--cs-shell);color:var(--cs-screw);border:none;border-radius:2px;cursor:pointer;letter-spacing:.08em;transition:background .2s}
.cs-btn:hover{background:var(--cs-accent);color:#fff}
.cs-comment-list{margin-top:.85rem}
.comment-list{list-style:none;padding:0;margin:0}
.comment-list .comment-list{margin-left:1rem;border-left:1px dotted #d0c8b0;padding-left:.5rem}
.comment-box{padding:.55rem 0;border-bottom:1px dotted #d0c8b0}
.comment-box:last-child{border-bottom:none}
.comment-title{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;font-size:.8rem;color:var(--cs-muted);margin-bottom:.2rem}
.comment-user{font-weight:700;color:var(--cs-brand)}
.comment-admin>.comment-title .comment-user{color:var(--cs-accent)}
.comment-time{color:var(--cs-muted)}
.comment-reply{cursor:pointer;color:var(--cs-brand);font-size:.75rem}
.comment-title a{color:var(--cs-accent);font-size:.75rem}
.comment-content{font-size:.9rem;line-height:1.6}
.comment-content p{margin-bottom:.25rem}
.comment-replys{margin-left:.4rem;font-size:.8rem}
.comment-replys span{margin-left:.4rem;color:var(--cs-brand);cursor:pointer;font-size:.75rem}
.cs-paging{text-align:center;margin:1.25rem 0;padding:0 1rem}
.cs-paging .paging{display:flex;justify-content:center;flex-wrap:wrap;gap:.3rem}
.cs-paging .paging .paging-link,.cs-paging .paging .paging-next,.cs-paging .paging .paging-prev,.cs-paging .paging a{display:inline-block;padding:.35rem .7rem;font-family:var(--cs-mono);font-size:.7rem;text-decoration:none;border:1px solid #555;border-radius:2px;color:var(--cs-screw);background:var(--cs-shell);transition:all .2s}
.cs-paging .paging a:hover{background:var(--cs-accent);color:#fff;border-color:var(--cs-accent);text-decoration:none}
.cs-paging .paging .paging-active{background:var(--cs-accent);color:#fff;border-color:var(--cs-accent);font-weight:700}
.cs-paging .paging .paging-disabled{color:#555;pointer-events:none}
.cs-paging .paging .paging-ell{border:none;padding:.35rem .25rem;color:#666;background:0 0}
.cs-login{max-width:340px;margin:3rem auto;text-align:center;background:var(--cs-label);padding:2rem;border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,.3)}
.cs-login-title{font-family:var(--cs-mono);font-size:1rem;font-weight:700;margin-bottom:1rem;letter-spacing:.15em;color:var(--cs-ink)}
.cs-login-form .cs-input{text-align:center}
.cs-prompt{max-width:340px;margin:3rem auto;text-align:center;background:var(--cs-label);padding:2rem;border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,.3)}
.cs-prompt-text{font-family:var(--cs-mono);font-size:.9rem;margin-bottom:.85rem;color:var(--cs-ink)}
.cs-prompt-footer{font-size:.8rem;color:var(--cs-muted)}
.cs-prompt-footer a{margin:0 .5rem;color:var(--cs-brand)}
.cs-empty{text-align:center;padding:3rem 1rem}
.cs-empty-text{font-family:var(--cs-mono);font-size:.85rem;color:#666;letter-spacing:.15em}
.cs-footer{background:var(--cs-shell);text-align:center;padding:1rem 1.25rem;font-family:var(--cs-mono);font-size:.55rem;color:#555;letter-spacing:.05em;text-transform:uppercase}
.cs-footer a{color:#666}
.cs-footer a:hover{color:var(--cs-screw)}
.alert{position:fixed;top:0;left:0;z-index:99990;width:100%;height:100%;display:flex;align-items:center}
.alert-bg{width:100%;height:100%;background:#000;opacity:.5;position:fixed;top:0;left:0}
.alert-box{width:280px;background:var(--cs-label);position:relative;margin:auto;box-shadow:2px 3px 12px rgba(0,0,0,.3);border:1px solid #d0c8b0;border-radius:4px}
.alert-content{font-size:.9rem;padding:1.5rem 1.25rem;text-align:center}
.alert-footer{width:100%;border-top:1px solid #d0c8b0;display:flex}
.alert-footer>div{flex:1;padding:.55rem 0;text-align:center;cursor:pointer;font-family:var(--cs-mono);font-size:.85rem;transition:color .2s}
.alert-cancel{color:var(--cs-muted)}
.alert-cancel:hover{color:var(--cs-brand)}
.alert-confirm{color:var(--cs-accent);font-weight:700;border-left:1px solid #d0c8b0}
.alert-confirm:hover{text-decoration:underline}
.prompt{background:rgba(0,0,0,.5);position:fixed;z-index:99920;top:0;left:0;width:100%;height:100%}
.prompt-box{text-align:center;font-size:.9rem;background:var(--cs-label);position:fixed;z-index:99921;top:0;left:0;width:100%;padding:1rem;border-bottom:2px solid var(--cs-accent)}
.prompt-close{font-size:1.5rem;color:#c8c0b0;float:right;cursor:pointer;position:absolute;top:0;right:.75rem;user-select:none}
.prompt-close:hover{color:var(--cs-accent)}
.prompt-title{display:block;text-align:center;padding-bottom:.4rem;font-size:.85rem;letter-spacing:.15em;color:var(--cs-accent);font-family:var(--cs-mono);font-weight:700}
.prompt-content{color:var(--cs-ink);display:inline-block;margin-bottom:.2rem}
.prompt-footer{padding-top:.2rem}
.prompt-footer span{color:var(--cs-muted);display:inline-block;cursor:pointer;font-size:.8rem;margin:0 .4rem}
.prompt-footer span:hover{color:var(--cs-brand)}
.ani-up-in{animation:.6s upIn}
@keyframes upIn{0%{opacity:0;transform:translate3d(0,-10%,0)}
100%{opacity:1;transform:translate3d(0,0,0)}
}
@media (max-width:576px){.cs-page{max-width:100%}
.cs-header{padding:.6rem .75rem}
.cs-cassette{max-width:100%;margin:1rem .5rem;border-radius:6px;padding:10px}
.cs-cassette::before{display:none}
.cs-window{height:50px;gap:24px}
.cs-reel{width:32px;height:32px}
.cs-reel::before{width:10px;height:10px}
.cs-reel::after{width:4px;height:4px}
.cs-label{padding:.5rem .75rem}
.cs-playing{margin:1rem .5rem;padding:1rem}
.cs-playing-title{font-size:1.2rem}
.cs-comments{margin:0 .5rem 1rem}
.cs-detail-nav{margin:1rem .5rem}
}
.alert{z-index:99990!important;position:fixed!important;top:0!important;left:0!important;width:100%!important;height:100%!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:24px!important;box-sizing:border-box}
.alert-bg{background:rgba(0,0,0,.5)!important;opacity:1!important}
.alert-box{position:relative!important;margin:0!important;inset:auto!important;width:360px!important;max-width:90vw!important;background:#fff!important;color:#212121;border:none!important;border-radius:8px!important;box-shadow:0 12px 40px rgba(0,0,0,.2)!important;overflow:hidden;font-family:inherit;animation:alertIn .3s ease both}
@keyframes alertIn{from{opacity:0;transform:translateY(20px) scale(.96)}
to{opacity:1;transform:translateY(0) scale(1)}
}
.alert-content{padding:24px!important;text-align:center!important;font-family:inherit!important;font-size:16px!important;line-height:1.7!important;color:inherit!important;border-bottom:1px solid rgba(0,0,0,.08)!important;background:0 0!important}
.alert-footer{display:flex!important;padding:0!important;border-top:none!important;background:0 0!important}
.alert-cancel,.alert-confirm{flex:1!important;padding:13px 0!important;margin:0!important;font-family:inherit!important;font-size:13px!important;font-weight:600!important;letter-spacing:1px!important;text-transform:uppercase;cursor:pointer;border:none!important;border-radius:0!important;text-align:center;transition:background .2s,opacity .2s}
.alert-cancel{color:inherit!important;background:0 0!important;border-right:1px solid rgba(0,0,0,.08)!important}
.alert-cancel:hover{background:rgba(0,0,0,.04)!important}
.alert-confirm{color:#fff!important;background:#212121!important}
.alert-confirm:hover{background:#424242!important}
@media(max-width:480px){.alert-box{width:100%!important;border-radius:0!important}
.alert-content{font-size:15px!important;padding:20px!important}
.alert-cancel,.alert-confirm{padding:12px 0!important;font-size:12px!important}
}
