*{box-sizing:border-box}body{color:#171717;background:#f5f2ec;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.page{width:min(1440px,100% - 64px);margin:0 auto;padding:56px 0 32px}.topbar{border-bottom:1px solid #00000029;justify-content:space-between;align-items:center;padding-bottom:28px;display:flex}.brand{align-items:baseline;gap:36px;display:flex}.logo{letter-spacing:-.04em;font-family:Georgia,Times New Roman,serif;font-size:26px;position:relative}.logo:after{content:"";background:#c85f28;height:2px;position:absolute;bottom:1px;left:18px;right:4px}.brand span{color:#555;font-size:15px;font-weight:400}nav{gap:48px;display:flex}nav a{color:#111;font-size:13px;text-decoration:none}nav a:hover{color:#c85f28}.hero{padding:52px 0 58px}.hero h2{letter-spacing:-.02em;margin:0;font-family:Georgia,Times New Roman,serif;font-size:clamp(26px,3.6vw,42px);font-weight:400;line-height:1.25}.hero p{color:#666;margin:18px 0 0;font-size:13px;line-height:1.6}.sample-item{border-bottom:1px solid #0000001f;grid-template-columns:1.25fr 1fr 1.35fr;align-items:start;gap:56px;padding:26px 0;display:grid}.samples{border-top:1px solid #0000001f}.sample-meta{grid-template-columns:52px 1fr;column-gap:8px;display:grid}.sample-id{color:#222;font-size:13px}.sample-meta h3{margin:0 0 16px;font-size:16px;font-weight:600}.sample-meta p{color:#333;grid-column:2;margin:0;font-size:14px;line-height:1.7}.label{color:#555;margin-bottom:12px;font-size:12px}.sample-lyrics{flex-direction:column;align-self:stretch;min-height:0;display:flex;position:relative}.sample-lyrics:after{content:"";pointer-events:none;background:linear-gradient(#f5f2ec00,#f5f2ec 74% 100%);height:54px;position:absolute;bottom:18px;left:0;right:12px}.sample-lyrics-expanded:after{display:none}.lyrics-text{max-height:var(--lyrics-collapsed-height);scrollbar-gutter:stable;white-space:pre-line;color:#222;flex-shrink:0;margin:0 0 10px;padding-right:12px;font-size:14px;line-height:1.7;transition:max-height .26s;overflow-y:auto}.sample-lyrics-expanded .lyrics-text{max-height:var(--lyrics-expanded-height);overflow-y:hidden}.text-button{color:#555;cursor:pointer;background:0 0;border:0;margin-top:auto;padding:0;font-size:12px}.text-button:hover{color:#c85f28}.audio-player{grid-template-columns:44px 1fr auto;align-self:center;align-items:center;gap:18px;display:grid}.sample-item-expanded .audio-player{align-self:start}.play-button{cursor:pointer;color:#111;background:0 0;border:1px solid #00000059;border-radius:999px;width:44px;height:44px;font-size:14px}.play-button:hover{color:#c85f28;border-color:#c85f28}.waveform{color:#11111152;cursor:pointer;background:0 0;border:0;align-items:center;gap:2px;height:52px;padding:0;display:flex}.waveform span{background:currentColor;border-radius:2px;flex:1 1 0;min-width:2px;transition:background-color .14s,height .18s;display:block}.waveform span.active{color:#111}.waveform:hover span{color:#c85f2866}.waveform:hover span.active{color:#c85f28}.time{color:#555;white-space:nowrap;font-size:12px}footer{text-align:center;color:#777;padding-top:42px;font-size:12px}@media (width<=900px){.page{width:min(100% - 32px,720px);padding:28px 0}.topbar{flex-direction:column;align-items:stretch;gap:18px;padding-bottom:22px}.brand{justify-content:space-between;gap:18px}nav{flex-wrap:wrap;justify-content:flex-start;gap:22px}.hero{padding:34px 0 36px}.hero h2{font-size:clamp(24px,8vw,34px);line-height:1.18}.hero p{margin-top:14px}.sample-item{grid-template-columns:1fr;gap:18px;padding:24px 0}.sample-meta{grid-template-columns:40px 1fr}.sample-meta h3{margin-bottom:12px}.sample-lyrics{align-self:auto;margin-left:48px}.lyrics-text{max-height:220px}.sample-lyrics-expanded .lyrics-text{max-height:var(--lyrics-expanded-height)}.text-button{margin-top:2px}.audio-player{grid-template-columns:40px minmax(0,1fr) auto;gap:10px;margin-left:48px}.play-button{width:40px;height:40px}.waveform{gap:1px;min-width:0;height:44px}.waveform span{min-width:1px}.time{font-size:11px}}@media (width<=520px){.page{width:min(100% - 24px,480px)}.brand{flex-direction:column;align-items:flex-start;gap:6px}.brand span{font-size:13px}nav{gap:16px}.sample-meta{grid-template-columns:32px 1fr}.sample-lyrics,.audio-player{margin-left:40px}.sample-id,nav a,.hero p,.sample-meta p,.lyrics-text{font-size:13px}.audio-player{grid-template-columns:40px minmax(0,1fr)}.time{grid-column:2;justify-self:end}}
